在多个 div 上添加和删除类

Question

我有一个物品清单。第一项自动具有“活动”类。 单击此列表中的另一个项目时，“活动”类将从第一个项目中删除并添加到列表中单击的项目中。到目前为止，一切顺利。

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

例如

List Item 1 有类“active”> Div Item 1 也有类“active”

单击列表项 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匹配列表项和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

您的案例包装器 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

有很多方法可以做到这一点。但是下面的 sn-p 通过对现有代码进行最少的更改来实现目标。

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