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

I have two indicator lists of bootstrap carousel

我有两个bootstrap轮播指示器列表

First

<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>

Second

<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>

what I want to do is check, if children of First list has active class and and give active class to Second list children on the same index number where first list have active class.

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

As fist list is carousel indicator list.... it changes as carousel item changes

由于拳头列表是轮播指示器列表....它随着轮播项目的变化而变化

For Example: If third item from first list has class active then give active to the third item of the second list

例如:如果第一个列表中的第三个项具有活动类,则激活第二个列表中的第三个项

jQuery I tried(I am new to jQuery)

jQuery我试过(我是jQuery的新手)

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

Where i am rit now Just example...i want to move active class on both indicators https://jsfiddle.net/ppwn8oau/

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

2 个解决方案

#1

This might work for you:

这可能对你有用:

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

EDIT

$('#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>

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

2 个解决方案

#1

更多相关文章

随机推荐