在悬停追加跨度一次

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上追加一个跨度。
其工作完美。
但我只想在最后一次后追加一次。
谢谢。

Answer 1

使用one：

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

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

Answer 2

我发现了jQuery api manual的例子，这不就是你想要什么？

$("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 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 
} 

Documentation，CanIUse