添加和刪除多個div上的類

Question

我有一個項目列表。第一個項目自動具有「活動」類。 單擊此列表中的另一個項目時，將從第一個項目中刪除類別「active」並將其添加到列表中單擊的項目。到現在爲止還挺好。

但是，我想另一個div基於列表中點擊的項目添加/刪除類。

例如

列表項1已經類「活性」>股利物品1還具有類「活性」

點擊列表項3：列表項目1類「活性」被除去，並添加到列表項3>事業部項目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 assing相同的ID不止一次在同一文件內。我會建議改變的標記，如下圖所示：

<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屬性，以配合其各自的div元素列表項。

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是語義上不正確，也只能是在頁面上一個元素一個ID。如果包裝所有這些div的一個DIV並給予一個div的，ID，那麼你可以這樣做：

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