使用 data-slide-to 和 javascript 将类添加到轮播导航答案

【问题标题】：Using data-slide-to and javascript to add a class to carousel navigation使用 data-slide-to 和 javascript 将类添加到轮播导航
【发布时间】：2015-03-20 00:38:07
【问题描述】：

嘿，所以我使用引导程序构建了一个轮播和轮播导航。现在我希望能够检测 'data-slide-to' 的值并根据该值将样式应用于相应的导航项。

轮播导航

<div class="carouselNav">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-md-12 col-lg-12">
      <ul>
      <li><a class="" href="#featured" role="button" data-slide-to="0">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>Web Design</h3>
      </a></li>
      <li><a class="" href="#featured" role="button" data-slide-to="1">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>SEO</h3>
      </a></li>
      <li><a class="" href="#featured" role="button" data-slide-to="2">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <h3>Project Management</h3>
      </a></li>
      </ul>
    </div><!-- col -->
    </div><!-- row -->
    </div><!-- container -->

提议的 Javascript（其中 #web 将是赋予每个导航项的唯一 ID）

    if (data-slide-to.value == 0) {
    $('#web').addClass('highlight');
} else {
    $('#web').removeClass('highlight');
}
});

提议的 CSS

.highlight {
}
.hightlight::after {
content: ' >';}

本质上，当相应的幻灯片 (0,1,2) 处于活动状态时，导航将在其后有一个“>”。任何方向都会有所帮助。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

使用 jQuery .data 处理数据属性

http://api.jquery.com/data/

【讨论】：

感谢您的回复 - 我无法看到这是如何连接的，但我感谢您的努力。干杯。
那部分是检索“data-slide-to”属性的值。那么，您到底在完成什么方面遇到了困难？您似乎已经具备了基础知识。
我希望能够检测 'data-slide-to' 的值并根据值向元素添加 CSS 类。我认为该值是您正在谈论的 .data 但我不确定如何连接它。
这取决于您希望如何设置导航和轮播，但您可能不需要使用 data-slide-to 属性。这些数字与链接的父 li 元素的索引相同，因此您可以使用它。这是我为另一个关于堆栈溢出的问题制作的演示，它可能对您了解如何将这样的东西放在一起很有用。 jsfiddle.net/troythompson/57b49y20