javascript - 在悬停时追加跨度一次

Question

这是我的html：

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
  </ul>

这是我的 js 函数：-

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

我想要这种类型的输出：-

<ul>
        <li>Milk</li>
        <li>Bread</li>
        <li class='fade'>Chips</li>
        <li class='fade'>Socks</li>
<span> ***</span>
      </ul>

在这里，我尝试在鼠标悬停在 li 上附加一个跨度。
它的工作完美。
但我只想在最后一个 li 之后附加一次。
谢谢。

Answer 1

我在jQuery api 手册上找到了这个例子，这不是你想要的吗？

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

或者您不想在鼠标离开时删除跨度，而只想附加一个跨度：

$("li").hover(function () {
  if ($(this).find('span').length == 0) {
    $(this).append($("<span> ***</span>"));
  }
});

Answer 2

使用one：

$("li").one("hover", function () {
   $(this).append($("<span> ***</span>"));
});

http://api.jquery.com/one/

Answer 3

只需首先检查跨度是否已经存在。请记住，如果您想在鼠标离开后删除跨度，“悬停”可以具有两个功能。这相当于 mouseover 和 mouseleave 的组合。

$("li").hover(
  function () {
    if ($(this).is(':empty')) {
      $(this).append($("<span> ***</span>"));
    }
  });

参考：hover , empty , mouseover , mouseleave

Answer 4

使用现代 JS！

const lis = document.getElementsByTagName("li");
let span;
for (const li of lis) {
    li.addEventListener("mouseover", function() {
        // Do something cool
        if (!span) {
             span = document.createElement("span");
             span.innerText = " ***";
             li.parentElement.append(span);
        }
    }, {once : true}); // (optional) This will make it fire only once for each li
                       // You could add one "once" listener to just the ul as well
}

文档,可以使用