Question

我有一个项目列表。第一项自动具有“活动”类。单击此列表中的另一个项目时，将从第一个项目中删除“活动”类，并将其添加到列表中单击的项目中。到目前为止，非常好。

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

例如

列表项1具有“活动”类＆gt; Div Item 1也有“active”类

点击列表项3：列表项1类“活动”被删除并添加到列表项3＆gt; 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

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

在多个div上添加和删除类

3 个答案: