jQuery - Finden aktive Klasse von einem Listenelement und geben Sie diese Klasse in einer anderen Liste

Question

Ich habe zwei Anzeigelisten von Bootstrap-Karussell

Erste

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

Zweiter

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

, was ich will zu tun ist, zu überprüfen, ob Kinder der ersten Liste active Klasse und und aktive Klasse Second-Liste Kinder auf der gleichen Indexnummer, wo die erste Liste aktive Klasse haben.

Als Faust Liste ist Karussells Indikator Liste .... es ändert sich carousel item ändert

Beispiel: Wenn dritte Element aus der ersten Liste Klasse active dann active mit dem dritten Element der zweiten Liste geben

jQuery versuchte ich (ich jQuery bin hier)

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

wo ich jetzt gerade Beispiel rit bin ... ich möchteauf beiden Indikatoren aktive Klasse bewegen

Answer 1

Dies könnte für Sie arbeiten:

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>

Answer 2

Versuchen Sie folgendes:

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