我的练习中的JavaScript验证错误

我正在努力为孩子们开发一个电子学习网站。它包含一个练习，通过查看线索图像，在给定的四个选项中选择正确答案。当孩子选择正确答案时，答案会变为带有right.pngimage的绿色，而选择错误答案时，答案会变为带有error.png图像的红色。这里的问题是，当第二次单击worng答案时，会显示多个错误的.png图像。这个问题的图像线索是gift.有人能帮我吗。。 我的html代码是-

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

喘息
礼物
高尔夫球
阵风

我的JavaScript是-

$(document).ready(function() 
         {

     //11111111111111
            $('ul.gift li').click(function(e) 
            { 
                correct = "gift";
                needed = $(this).html();

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

                            });
});

$（文档）.ready（函数（）
{
//11111111111111
$（'ul.gift li'）。单击（函数（e）
{ 
correct=“礼物”；
needed=$（this.html（）；
如果（正确==需要）{
$（e.target）.最近的（“li”）.empty（）；
$innercontent='
'+needed+'
'；
$（e.target）.lio.html（$innercontent）；
}否则{
$（e.target）.最近的（“li”）.empty（）；
$innercontent='
'+needed+'
'；
$（e.target）.lio.html（$innercontent）；
}   
});
});

您所需的变量导致了问题

---

更改自所需=$（this.html（）；to needed=$（this.text（）

问题在于，每次点击

li

都会一次又一次地追加图像，但之前已经检查过了。因此，您需要一种方法来知道此元素已被单击，并且在这种情况下不执行任何操作

例如，您可以添加额外的CSS类。类似这样的内容（对代码进行了一些额外的改进）：

$（'ul.gift li'）。单击（功能（e）{
if（$（this）.hasClass（'answered'））{
返回；
}
var correct=“礼物”；
var needed=$（this.html（）；
如果（正确==需要）{
var$innercontent=''；
$（this）.addClass（'responsed correct'）.append（$innercontent）；
}否则{
var$innercontent=''；
$（this.addClass（'回答错误'）.append（$innercontent）；
}
});

演示： 一些注释。1). 您可以简单地使用

$（this）

，而不是

$（e.target）.最近的（“li”）

，因为在您的示例中，这是相同的元素。2). 始终使用

var

关键字声明变量。3). 与内联样式相比，使用类更灵活，例如

.right{color:green}

而不是

style=“color:green”

$（文档）.ready（函数（）
{
$（'ul.gift li'）。单击（函数（e）
{ 
correct=“礼物”；
needed=$（this.html（）；
如果（正确==需要）{
$（this.addClass（'correct'）；
}否则{
$（this.addClass（'error'）；
}
});
});
ulli{
背景位置：右中；
背景重复：无重复；
背景尺寸：30px 30px；
高度：30px；
宽度：100px；
}
.对{
背景图片：url(http://chinagorman.files.wordpress.com/2011/10/check-mark-small.jpg);
颜色：绿色；
}
.不正确{
背景图片：url(https://www.catholicmatri.com/images/wrong-icon.png);
颜色：红色；
}


喘息
礼物
高尔夫球
阵风
只需使用较少JavaScript的CSS就可以更干净一些

$(document).ready(function () {

    $('ul.gift li').click(function () {

        var correct = "gift",
            given = $(this).text();

        $("ul.gift li").removeClass("co in");
        if (correct === given) {
            $(this).addClass("co");
        } else {
            $(this).addClass("in");
        }

    });
});

.co:after{
 content:url("http://findicons.com/files/icons/1609/ose_png/256/tick.png");
 zoom: .06;

}
.in:after{
  content:url("http://findicons.com/files/icons/1014/ivista/128/error.png");
  zoom: .1;
}
li:hover{
  cursor:pointer;
}

这可能是一种有用的通用方法，可以帮助您保持代码“干燥”。特别是如果您将答案硬编码为类名：

1）创建并缓存要附加到答案的图像

2）设置我们的点击处理程序

3）声明变量

a）a缓存$（此）--单击的li

b）将文本中的空格和特殊字符替换为破折号，以获得简单的类名——注意：我认为数据属性是一种更好的方法

c）根据答案的正确性确定合适的图像

4）将更新的图像附加到li

$(function() {

  /*1*/
  var $rightWrongImg = $('<img />', { 
    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/ex.png' 
  });

  /*2*/
  $('ul.question').on('click', 'li', function(e) {

    /*3*/
    var $this = $(this),
        text = $this.text().replace(/\W+/g, '-'),
        imgSrc = $this.parent().hasClass(text) ? 'right' : 'wrong';

    /*4*/
    $rightWrongImg.attr('src', imgSrc+'.png').appendTo($this);
  });


$（函数（）{
/*1*/
变量$RightErrorImg=$（'
HTML


喘息
礼物
高尔夫球
阵风


这也将有助于：

<ul class="question list longer-answer-with-spaces">
  <li>this is incorrect</li>
  <li>longish and wrong</li>
  <li>longer answer with spaces</li> <!-- win -->
  <li>i am not not wrong</li>
</ul>


这是不正确的
长错
用空格回答较长的问题
我没有错

你能把这个放在js提琴里吗？为什么你要清空最近的
li
而不是改变点击过的li的风格？这是个问题吗？@Kola因为我是编程新手，所以我已经尽了最大的努力来开发这个网站。如果需要任何更正，请帮助我谢谢你的评论和回答：）谢谢VJS..正是我所期望的：）
$(function() {

  /*1*/
  var $rightWrongImg = $('<img />', { 
    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/ex.png' 
  });

  /*2*/
  $('ul.question').on('click', 'li', function(e) {

    /*3*/
    var $this = $(this),
        text = $this.text().replace(/\W+/g, '-'),
        imgSrc = $this.parent().hasClass(text) ? 'right' : 'wrong';

    /*4*/
    $rightWrongImg.attr('src', imgSrc+'.png').appendTo($this);
  });

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

<ul class="question list longer-answer-with-spaces">
  <li>this is incorrect</li>
  <li>longish and wrong</li>
  <li>longer answer with spaces</li> <!-- win -->
  <li>i am not not wrong</li>
</ul>