在多个div上添加和删除类

Question

我有一份物品清单。第一个项目自动将类设置为"active“。单击此列表中的另一个项目时，将从第一个项目中删除"active“类，并将其添加到列表中已单击的项目中。到现在为止还好。

但是，我想要另一个div根据列表中单击的项添加/删除一个类。

例如

列表项1具有类"active“>分项1也具有类"active”

点击list item 3: List Item 1类"active“被移除并添加到list item 3> Div Item 1类"active”被移除并添加到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匹配列表项和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

永远不会在同一文档中同一个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

您的case包装器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');
	var divClass = $(this).attr('id')
	$('div').removeClass('active-case');
	$('.' + 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>

​