Добавление и удаление классов по нескольким divs

Question

У меня есть список предметов. Первый элемент автоматически имеет класс «active». При нажатии на другой элемент в этом списке класс «активный» удаляется из первого элемента и добавляется к кликуемому элементу в списке. Все идет нормально.

Но, я хочу, чтобы другой div добавлял/удалял класс на основе щелкнутого элемента в списке.

Например

Элемент списка 1 имеет класс «активный»> Див Пункт 1 также класс «активный»

Щелчок по элементу списка 3: Список Пункт 1 класс «активный» удаляют и добавляют к элемент списка 3> Div Пункт 1 класс «активный» удаляется и добавляется к Div 3

до сих пор у меня есть это:

$('.case-1').addClass('active-case'); 
$('#case-1').addClass('active'); 

$("#carousel-nav ul li").click(function(){ 
$('#carousel-nav ul li.active').not(this).removeClass('active'); 
$(this).toggleClass('active'); 
})  

Но я не могу найти способ достичь addClass ма tching list item и div.

HTML:

<div id="carousel-nav"> 
<ul> 
    <li id="case-1"><a href="#"></a></li> 
    <li id="case-2"><a href="#"></a></li> 
    <li id="case-3"><a href="#"></a></li> 
    <li id="case-4"><a href="#"></a></li> 
    <li id="case-5"><a href="#"></a></li> 
    <li id="case-6"><a href="#"></a></li> 
    <li id="case-7"><a href="#"></a></li> 
</ul> 
</div> 


<div id="case-wrapper" class="case-1> /* Post */ </div> 
<div id="case-wrapper" class="case-2> /* Post */ </div> 
<div id="case-wrapper" class="case-3> /* Post */ </div> 
<div id="case-wrapper" class="case-4> /* Post */ </div> 
<div id="case-wrapper" class="case-5> /* Post */ </div> 
<div id="case-wrapper" class="case-6> /* Post */ </div> 
<div id="case-wrapper" class="case-7> /* Post */ </div> 

Answer 1

NEVER Ассинг тот же идентификатор более чем один раз в том же документе. Я хотел бы предложить, чтобы изменить разметку, как показано ниже:

<div id="carousel-nav"> 
<ul> 
    <li id="case-1" class="list-item-class" data-number="1"><a href="#"></a></li> 
    <li id="case-2" class="list-item-class" data-number="2"><a href="#"></a></li> 
    <li id="case-3" class="list-item-class" data-number="3"><a href="#"></a></li> 
    <li id="case-4" class="list-item-class" data-number="4"><a href="#"></a></li> 
    <li id="case-5" class="list-item-class" data-number="5"><a href="#"></a></li> 
    <li id="case-6" class="list-item-class" data-number="6"><a href="#"></a></li> 
    <li id="case-7" class="list-item-class" data-number="7"><a href="#"></a></li> 
</ul> 
</div> 


<div id="case-wrapper-1" class="div-class" data-number="1"> /* Post */ </div> 
<div id="case-wrapper-2" class="div-class" data-number="2"> /* Post */ </div> 
<div id="case-wrapper-3" class="div-class" data-number="3"> /* Post */ </div> 
<div id="case-wrapper-4" class="div-class" data-number="4"> /* Post */ </div> 
<div id="case-wrapper-5" class="div-class" data-number="5"> /* Post */ </div> 
<div id="case-wrapper-6" class="div-class" data-number="6"> /* Post */ </div> 
<div id="case-wrapper-7" class="div-class" data-number="7"> /* Post */ </div> 

Используйте data-number атрибуты, чтобы соответствовать элементу списка с его соответствующим сНу элементом.

JQuery

$(document).on('click', '.list-item-class', function() { 
    var that = $(this); 
    var thisNum = that.attr('data-number'); 
    $('li[id^=case-]').removeClass('active'); 
    $('.div-class').removeClass('active'); 
    that.addClass('active'); 
    $('.div-class').filter('[data-number="' + thisNum + '"]').addClass('active'); 
}); 

Answer 2

Ваш случай оболочки дивы семантически неправильно, может быть только один идентификатор для одного элемента на этой странице. Если вы заключаете все эти дивы в одном DIV и дать, что один Div идентификатор, то вы можете сделать это:

$('#carousel-nav ul li a').on('click', function(e){ 
 
    // you should really use buttons here instead of preventing default behavior 
 
    e.preventDefault(); 
 
    //this line gets the li that is active and the element clicked and toggles the classes between them (removes active from active and adds active to clicked), returns the index of the new active selection. 
 
    $(this).parent().siblings('.active').addBack().toggleClass('active'); 
 
    //this goes through all the divs in the case-wrapper and removes the active class from them. Then it finds the element with the same index of the active class from the nav and applies the active class 
 
    $('#case-wrapper > div').removeClass('active').eq($('#carousel-nav ul li.active').index()).addClass('active'); 
 
})

.active, .active > *{ 
 
    color:red; 
 
}

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

 

 
<div id="carousel-nav"> 
 
<ul> 
 
    <li id="case-1" class="active"><a href="#">1</a></li> 
 
    <li id="case-2"><a href="#">2</a></li> 
 
    <li id="case-3"><a href="#">3</a></li> 
 
    <li id="case-4"><a href="#">4</a></li> 
 
    <li id="case-5"><a href="#">5</a></li> 
 
    <li id="case-6"><a href="#">6</a></li> 
 
    <li id="case-7"><a href="#">7</a></li> 
 
</ul> 
 
</div> 
 

 
<div id="case-wrapper" > 
 
    <div class="case-1 active"> /* Post */ </div> 
 
    <div class="case-2"> /* Post */ </div> 
 
    <div class="case-3"> /* Post */ </div> 
 
    <div class="case-4"> /* Post */ </div> 
 
    <div class="case-5"> /* Post */ </div> 
 
    <div class="case-6"> /* Post */ </div> 
 
    <div class="case-7"> /* Post */ </div> 
 
</div>

Answer 3

Там может быть много способов сделать это. Но следующий фрагмент достигает цели, внося минимальные изменения в существующий код.

$(document).ready(function() { 
 
    $('.case-1').addClass('active-case'); 
 
    $('#case-1').addClass('active'); 
 

 
    $("#carousel-nav ul li").click(function() { 
 
    $('#carousel-nav ul li.active').not(this).removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
\t var divClass = $(this).attr('id') 
 
\t $('div').removeClass('active-case'); 
 
\t $('.' + divClass).addClass('active-case'); 
 
    }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="carousel-nav"> 
 
    <ul> 
 
    <li id="case-1"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-2"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-3"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-4"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-5"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-6"> 
 
     <a href="#"></a> 
 
    </li> 
 
    <li id="case-7"> 
 
     <a href="#"></a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="case-wrapper1" class="case-1"> /* Post */ </div> 
 
<div id="case-wrapper2 " class="case-2">/* Post */</div> 
 
<div id="case-wrapper3" class="case-3"> /* Post */ </div> 
 
<div id="case-wrapper4 " class="case-4">/* Post */</div> 
 
<div id="case-wrapper5" class="case-5"> /* Post */ </div> 
 
<div id="case-wrapper6 " class="case-6">/* Post */</div> 
 
<div id="case-wrapper7" class="case-7"> /* Post */ </div>