Question

我的HTML中有2个列表。在这两种情况下，列表项都以一个单词开头，并以一个递增数字结尾。

我需要的是，当我将鼠标悬停在第二个列表上时，要更改第二个列表中的项目。让我用一个例子来解释：

悬停项目1时>> togleClass other-item-1 当悬停项目2 >> togleClass other-item-2

此刻我的代码是：

<ul class="first-list">
    <li class="link-0" title="eleme=www, elemnt2=33">link 01</li>
    <li class="link-1">link 02</li>
    <li class="link-2">link 03</li>
</ul>

<ul class="second-list">
    <li class="element-0">appartment-01</li>
    <li class="element-1">appartment-02</li>
    <li class="element-2">appartment-03</li>
</ul>

我知道我可以做类似的事情

$('.link-0').hover(function(){$('.element-0').toggleClass('active'); });

但是我不想重复写这样的代码：

$(function () {
        for (var x = 0; x < 100; x++) {
            $('.link-'+ x).hover(function(){
                $('.element-'+ x).toggleClass('active');
                    });
        }
    });

我知道我可以使用默认类或li选择器，但是我需要使用增量类，因为当我将link-1悬停时，我想显示.element-1

这不起作用，我不知道我在这里想念什么。

有人可以帮助我吗？

欢呼

Answer 1

请勿使用增量类或id属性。它们是一种反模式，导致不必要的复杂代码，难以维护-正如您在发布的JS示例中发现的那样。

根据您的要求，更好的方法是使用ul上的类，然后按索引关联li元素，如下所示：

$('.first-list li').hover(function() {
  $('.second-list li').eq($(this).index()).toggleClass('active');
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-list">
  <li title="eleme=www, elemnt2=33">link 01</li>
  <li>link 02</li>
  <li>link 03</li>
</ul>

<ul class="second-list">
  <li>appartment-01</li>
  <li>appartment-02</li>
  <li>appartment-03</li>
</ul>

Answer 2

为此只需使用一个通用类：

<ul class="first-list">
    <li class="link-0 dummy-class" title="eleme=www, elemnt2=33">link 01</li>
        <ul class="second-list">
            <li class="element-0">appartment-01</li>
        </ul>
    <li class="link-1 dummy-class">link 02</li>
        <ul class="second-list">
            <li class="element-1">appartment-02</li>
        </ul>
    <li class="link-2 dummy-class">link 03</li>
        <ul class="second-list">
            <li class="element-0">appartment-03</li>
        </ul>
</ul>


$('.dummy-class').hover(function(){$(this).find('ul').show(); });

这样，您不需要任何增量ID或类

jQuery中的增量2类名

2 个答案: