我的李值消失了

Question

我正在嘗試為孩子們開發一個電子學習網站。 它包含了通過查看線索圖像來在給定的四個選項中選擇正確答案的練習。 當孩子選擇正確的答案時，答案會變成帶有right.png圖像的綠色，而選擇錯誤的答案時，它就會變成帶有錯誤.png圖像的紅色。 這里的問題是當單擊right.png或rong.png對應的列表（即li值）消失時，有人可以幫我解決這個問題。

我的html代碼是-

<ul class="list gift">
    <li>gasp</li>
    <li>gift</li>
    <li>golf</li>
    <li>gust</li>
</ul>`

我的Javascript-

$(document).ready(function() 
 {
    $('ul.gift li').click(function(e) 
    { 
        correct = "gift";
        needed = $(this).text();

        if(correct==needed){
            $( e.target ).closest("li").empty();
            $innercontent = '<li style="color: green;">'+ needed +'<img src="images/right.png"></li>';
            $( e.target ).closest("li").html($innercontent);

        }else{
            $( e.target ).closest("li").empty();
            $innercontent = '<li style="color: red;">'+ needed +'<img src="images/wrong.png"></li>';
            $( e.target ).closest("li").html($innercontent);
        }   

    });
});

`

Answer 1

您的代碼中的問題是，當您單擊圖像時第二次執行.click() 。

您可以通過使用解決這個問題.one()代替.click() 如果將.one()與點擊處理程序一起使用，則僅執行一次。

工作代碼段：

 $(document).ready(function(){ $('ul.gift li').one("click", function(e){ var correct = "gift"; var needed = $(this).text(); if(correct==needed){ $( e.target ).closest("li").empty(); $innercontent = '<li style="color: green;">'+ needed +'<img src="images/right.png"></li>'; $( e.target ).closest("li").html($innercontent); } else{ $( e.target ).closest("li").empty(); $innercontent = '<li style="color: red;">'+ needed +'<img src="images/wrong.png"></li>'; $( e.target ).closest("li").html($innercontent); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list gift"> <li>gasp</li> <li>gift</li> <li>golf</li> <li>gust</li> </ul> 

了解更多： .one() | jQuery的