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

你应该这样使用它：

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

Answer 2

您需要使用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

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

如何使用相同的整数查找和追加类名

2 个答案: