如何使eventListener仅侦听该特定元素？

Question

$ul.on("mouseenter", 'li', function() {
    $("li button").slideDown();
});

所以我有一个li，旁边有一个按钮，像这样：

<ul>
<li>Buy Robes<button>Delete</button></li>
<li>Go shopping<button>Delete</button></li>
<li>Buy noodles<button>Delete</button></li>
</ul>

但是当我将鼠标悬停在任何特定的li上时，将显示所有lis的按钮。但是我想为我悬停的那个李。就像使用this关键字一样。

$ul.on("mouseenter", 'li', function() {
        $(this).$("li button").slideDown();
    });

上面的代码显然是错误的，但是我希望它能像这样工作。

Answer 1

正如注释中指出的那样，您的HTML无效。 button与li相邻，但是您使用的选择器着重于在button内部中找到li。 >

更正您的HTML；将button放入li中：

<ul>
  <li>Buy Robes <button>Delete</button></li>
  <li>Go shopping <button>Delete</button></li>
  <li>Buy noodles <button>Delete</button></li>
</ul>

现在，选择器$("li button")定位正确的元素。但是，还有一个问题。您正在显示所有button，无论悬停在哪个li上。要更正此问题，请将选择器的范围设置为this：

$ul.on("mouseenter", 'li', function() {
    $(this).find("> button").slideDown();
});

这样，仅显示button悬停的li。