我的练习中的JavaScript验证错误

Question

我正在尝试为孩子们开发一个电子学习网站。它包含一个练习，通过查看线索图像，在给定的四个选项中选择正确的答案。当孩子选择正确的答案时，答案会变为绿色，右边是.pngimage，而选择了错误的答案，它会变成红色，带有wrong.png图像。这里的问题是第二次点击worng答案显示多个wrong.png图像。这个问题的图像线索是gift.can任何人帮助我.. 我的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);
                        }   

                            });
});

Answer 1

您所需的变量导致问题。

http://jsfiddle.net/6gkpyhyf/

 needed = $(this).text();

从需要改变= $（this）.html（）; to needed = $（this）.text（）;

Answer 2

问题在于，每次点击li时，您都会反复添加图片，之前已经检查过该事件。所以你需要一种方法来知道这个元素已被点击，在这种情况下什么都不做。

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

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

    if ($(this).hasClass('answered')) {
        return;
    }

    var correct = "gift";
    var needed = $(this).html();

    if (correct == needed) {
        var $innercontent = '<img src="images/right.png">';
        $(this).addClass('answered correct').append($innercontent);
    } else {
        var $innercontent = '<img src="images/wrong.png"></li>';
        $(this).addClass('answered wrong').append($innercontent);
    }
});

演示：http://jsfiddle.net/LvrLtchf/

一些笔记。 1）。您可以简单地使用$( e.target ).closest("li")，而不是$(this)，这与您的情况相同。 2）。始终使用var关键字声明变量。 3）。它不是内联样式，而是使用类更灵活，例如.right {color: green}代替style="color: green"。

Answer 3

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

                if(correct==needed){
					$(this).addClass('correct');
				}else{
					$(this).addClass('incorrect');
				}
});
});

ul li {
			background-position: right center;
			background-repeat: no-repeat;
			background-size: 30px 30px;
			height: 30px;
			width: 100px;
		}
		.correct {
			background-image: url(http://chinagorman.files.wordpress.com/2011/10/check-mark-small.jpg);
			color: green;
		}
		.incorrect {
			background-image: url(https://www.catholicmatri.com/images/wrong-icon.png);
			color: red;
		}

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

Answer 4

只需使用少量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;
}

http://jsbin.com/retujikoto/1/edit

Answer 5

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

1）创建并缓存图片以附加到答案

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

3）宣布变种

a）缓存$（this） - 点击的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);
  });

HTML

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