jQuery - 从一个列表项中查找活动类，并将此类提供给另一个列表

Question

我有两个bootstrap carousel指标列表

第一

<ol class="rightci carousel-indicators">
  <li class="active" data-target="#carousel-example-generic" data-slide-to="0" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1" ></li>
<li data-target="#carousel-example-generic" data-slide-to="2" ></li>
<li data-target="#carousel-example-generic" data-slide-to="3" ></li>
</ol>

第二

<div class="left leftci carousel-indicators">
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a>
<a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a>
</div>

我想要做的是检查，如果第一个列表的子项具有active类，并将活动类提供给第一个列表具有活动类的相同索引号的第二个列表子项。

由于拳头列表是轮播指示符列表....它随carousel item更改而变化

例如： 如果第一个列表中的第三个项目具有类active，则将active提供给第二个列表中的第三个项目

jQuery我试过（我是jQuery的新手）

var index = $('#rcl li.active').parent().index();
    $('#lcl span.activelink').removeClass('activelink');
    $('#lcl span').eq(index).addClass('activelink');

我现在在哪里rit只是示例...我想在两个指标上移动活跃课程https://jsfiddle.net/ppwn8oau/

Answer 1

这可能对您有用：

var index = $('#rcl li.active').attr('slide-to');
$('#lcl span.activelink').removeClass('activelink');
$('#lcl span[slide-to=' + index + ']').addClass('activelink');

修改

$('#rcl li').click(function(event) {

  // set active to the clicked element
  $('#rcl li.active').removeClass('active');
  $(event.target).addClass('active');

  // get active element
  var index = $('#rcl li.active').attr('data-slide-to');

  // apply active to the second list
  $('#lcl span.activelink').removeClass('activelink');
  $('#lcl span[data-slide-to=' + index + ']').addClass('activelink');

});

#rcl li {
  cursor: pointer;
}
#rcl li.active {
  color: red;
}
#lcl span.activelink {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ol id="rcl" class="rightci carousel-indicators">
  <li class="active" data-target="#carousel-example-generic" data-slide-to="0">one</li>
  <li data-target="#carousel-example-generic" data-slide-to="1">two</li>
  <li data-target="#carousel-example-generic" data-slide-to="2">three</li>
  <li data-target="#carousel-example-generic" data-slide-to="3">four</li>
</ol>

<div id="lcl" class="left leftci carousel-indicators">
  <a href=""><span class="leftindicators activelink" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="1">slide2</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="2">slide3</span></a>
  <a href=""><span class="leftindicators" data-target="#carousel-example-generic" data-slide-to="3">slide4</span></a>
</div>

Answer 2

试试这个：

var index = $('.rightci li.active').data('slide-to');    
$('.rightci li').removeClass('active');    
$('.leftci a')eq(index).find('span').addClass('active');