Question

我正在尝试为孩子们开发一个电子学习网站。它包含一个练习，通过查看线索图像，在给定的四个选项中选择正确的答案。当孩子选择正确答案时，使用right.png图像将答案变为绿色，而选择错误答案时，答案将变为红色且带有wrong.png图像。这里的问题是点击right.png或wrong.png相应的列表（即）li值dissapears.can任何人帮我解决这个问题。

我的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()与单击处理程序一起使用，则只执行一次。

工作代码段：

＆＃13;

$(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);
    }   
  });
});

＆＃13;

<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>

＆＃13;

了解详情：.one() | jQuery

我的价值消失了

1 个答案: