在懸停追加跨度一次

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