Question

我的html代码中有一个很长的列表元素<li>：

<li class="pl1"><a href="#">some</a></li>
<li class="pl2"><a href="#">something</a></li>
<li class="pl3"><a href="#">something1</a></li>

在html代码对象的其他地方：

<span id="pl1">.</span>
<span id="pl2">.</span>
<span id="pl3">.</span>

我编写了一个脚本，按照模式添加名为focus的类：

$("li.pl1").mouseenter(function() {
    $("#pl1").addClass("focus");
});
$("li.pl2").mouseenter(function() {
    $("#pl2").addClass("focus");
});
$("li.pl3").mouseenter(function() {
    $("#pl3").addClass("focus");
});

唯一的问题是代码必须很长。如何根据这种模式编写一个简短的jQuery代码？

Answer 1

我同意BNL的方法......如果可能的话修改你的html，以便你使用同一个类。但是，如果不可能，您可以尝试使用starts with selector：

$('[class^="pl"]').mouseenter(function() {
   $('#' + $(this).attr("class")).addClass("focus");
});

这会给你你想要的东西（我想），但有更好的方法来做到这一点。例如，如果您开始向LI添加课程，我不确定会发生什么。

使用以＆＃34;数据开头的属性 - ＆＃34;是一种普遍接受的将信息传递到函数中的方法。如果您有能力更改您的HTML，您可能需要考虑：

<li class="pl" data-affectedId="pl1"><a href="#">some</a></li>

然后jquery变为：

$(".pl").mouseenter(function() {
   $("#"+$(this).attr("data-affectedId")).addClass("focus");
});

Answer 2

将一个类应用于所有项目，并将数据attr应用于存储相应的ID。

<li class="pl" data-itemid="pl1"><a href="#">some</a></li>
<li class="pl" data-itemid="pl2"><a href="#">some thing else</a></li>

将事件应用于该类并从数据中检索ID：

$(".pl").mouseenter(function() {
    $('#' + $(this).data("itemid")).addClass("focus");
});

您可能还需要鼠标输出功能。您可以改为使用hover。

Answer 3

以下是一系列步骤：

为列表项添加一个公共类，让我们说＆＃34; focusable-item＆＃34;
添加父元素以充当事件委派目标
将一个委托处理程序添加到父元素。为了更好地重复使用，让我们为它提供专注的课程＆＃39;
飘柔

标记：

<ul class="focusable>
  <li class="pl1 focusable-item"><a href="#">some</a></li>
  <li class="pl2 focusable-item"><a href="#">something</a></li>
</ul>

// jQuery code
$('.focusable').delegate('.focusable-item', {
  mouseenter: function () {
    $(this).addClass('focus');
  },
  mouseleave: function () {
    $(this).removeClass('focus');
  }
}

如何根据模式创建一个简短的jQuery代码？

3 个答案: