如何查找和追加具有相同整数的类名

Question

我希望这不会混淆。我有两个清单：

<ul class="list_A">
  <li class="item_1"></li>
  <li class="item_2"></li>
  <li class="item_3"></li>
</ul>
<ul class="list_B">
  <li class="item_1"></li>
  <li class="item_2"></li>
  <li class="item_3"></li>
</ul>

我想弄清楚的是，当我把鼠标悬停在其中一个列表项上时，我想让另一个列表中具有相同类的列表项附加相同的"活动"类。这就是我可以用下面的代码做的。

jQuery(document).ready(function($){
  $(".item_1").hover(function () {
    $(".item_1").toggleClass('active');
  });
  $(".item_2").hover(function () {
    $(".item_2").toggleClass('active');
  });
  $(".item_2").hover(function () {
    $(".item_2").toggleClass('active');
  });
});

然而，我该如何制作它，让它找到合适的类，而不必为每个类复制代码，并使其具有如下所示的内容？以下内容不起作用。：（

jQuery(document).ready(function ($) {
  var i = 0;
  i++;
  $(".item_" + i).hover(function () {
    $(".item_" + i).toggleClass('active');
  });
});

Answer 1

您需要使用mouseenter和mouseleave事件而不是hover，否则每次鼠标在元素上移动时都会触发。切换将一直触发。

这应该很好：

jQuery(document).ready(function() {
    jQuery('li').mouseenter(function() {
        jQuery('.'+this.classList[0]).addClass('active');
    }).mouseleave(function() {
        jQuery('.'+this.classList[0]).removeClass('active');
    });
});

这是FIDDLE

EDIT：如果只想将其应用于特定列表，请为每个ul添加一个公共类，并更新第一个选择器，如jQuery('ul.myclass > li')

Answer 2

您应该这样使用它：

jQuery(document).ready(function ($) {
    for ( var i = 1; i < 4; i++ ) {
        $(".item_" + i).hover(function () {
            $(".item_" + i).toggleClass('active');
        });
    }
});