添加和删除多个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>