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

Question

我有两个引导轮播的指标列表

第一

<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');

我现在在哪里 举个例子...我想在两个指标上移动活动课程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');