Question

昨天我发布了一个问题，即在2个单独的无序列表中定位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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您真的想使用not功能，可以这样使用它：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jquery，结合.not和.eq？

1 个答案: