结合.not和.eq？

Question

昨天我发布了一个问题，将2个相同的索引放在两个单独的无序列表中。

基本上，无序列表#2中的项是隐藏的--当您单击无序列表#1中的项时，无序列表#2中具有相同索引的项将会显示出来。

<ul class="list1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
<ul class="list2">
  <li class="hide">item 1</li>
  <li class="hide">item 2</li>
  <li class="hide">item 3</li>
  <li class="hide">item 4</li>
</ul>

.hide { display: none; }
.active { display: block; }

基于响应的解决方案是：

$('.list1').on('click', 'li', function() {    
    $('.list2 li').eq($(this).index()).addClass('active');
});

这个很好用！

现在，我正在尝试这样做，当一个行项出现时，其余的项就消失了。

我读到可以使用.not()方法完成此操作，但我很难将其与.eq()方法绑定。

如果我将下面的两个代码放在一起，它只会删除而不会添加。

$('.list2 li').eq($(this).index()).addClass('active');
$('.list2 li').not().eq($(this).index()).addClass('active');

我认为我必须将.eq()放入.not()方法中，但不确定如何操作。我也尝试过使用if语句，但也没有成功。

如果您能提供任何意见，我将非常感谢。谢谢!

Answer 1

为什么不删除所有li项上的active，只将其添加到相关的li中

​

$('.list1').on('click', 'li', function() {    
  $('.list2 li')
    .removeClass('active')
    .eq($(this).index()).toggleClass('active');
});

.hide { display: none; }
.active { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
<ul class="list2">
  <li class="hide">item 1</li>
  <li class="hide">item 2</li>
  <li class="hide">item 3</li>
  <li class="hide">item 4</li>
</ul>

​

如果你确实想使用not函数，你可以这样使用它：

​

$('.list1').on('click', 'li', function() {
  relevantLi = $('.list2 li').eq($(this).index())
  $('.list2 li').not(relevantLi).removeClass('active')
  relevantLi.addClass('active')
});

.hide { display: none; }
.active { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
<ul class="list2">
  <li class="hide">item 1</li>
  <li class="hide">item 2</li>
  <li class="hide">item 3</li>
  <li class="hide">item 4</li>
</ul>

​