在悬停追加一次跨度

at hover append span one time

本文关键字：一次 悬停 追加      更新时间：2023-09-26

这是我的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上添加一个span。
它的工作很完美。
但是我只想在最后一个li后面追加一次。
谢谢。

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

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

或者你不想在鼠标离开时删除span，而只想添加一个span:

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

使用one:

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

先检查span是否已经存在。记住，如果你想在鼠标离开后移除跨度，'hover'可以有两个函数。这相当于mouseover和mouseleave的组合。

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

参考:hover, empty, mouseover, mouseleave

使用现代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
}

文档,CanIUse

相关文章：