Question

我最初是['red', 'yellow', 'green', 'blue']的一系列颜色，它被改组为，让我们说，["green", "red", "yellow", "blue"]。

现在，我在互动框中，用户可以点击这些框。

混洗数组的第一个元素是通过for循环显示的，我现在想要提示用户点击一个框，如果它与这个颜色匹配，那么它是正确的＆＃39;并且如果没有想要继续循环，那就错了＆＃39;并且想要暂停循环直到他点击正确的颜色框。

我希望这一切都能在整个方框中使用，直到所有颜色都被正确识别出来。

我无法找出编写上述陈述的代码。

请查看http://jsfiddle.net/2cbcpq2r/2/，以便清楚了解我正在谈论的内容。

Answer 1

var counter = 0;
var colorArr = ['red', 'yellow', 'green', 'blue'];
$('div.box').click(function(){        
    if(this.className.indexOf(colorArr[counter])!=-1)
        counter++;
    else
        alert('wrong');
    if(counter==colorArr.length)
        alert('success');
});

将您的html文件更改为

<div class="box blue" id="b1"></div>
<div class="box green" id="b2"></div>
<br>
<div class="box yellow" id="b3"></div>
<div class="box red" id="b4"></div>
<br>
<div class="disp" id="disp"></div>

注意：如果您不想添加类，请在html中使用name属性。

其中colorArr是颜色数组的正确顺序

我创建了一个跟踪成功计数的计数器

如果用户通过了所有点击，则显示成功警报

如果用户点击了错误的颜色，则会显示错误提示

希望能帮助

Answer 2

有些可以解决html和jQuery

试试这个

$('div.box').on('click', function() {
    alert(currColor);
    if($(this).hasClass(currColor)) {
        alert('right');
    } else {
       alert('wrong');
    }  
});

<强> JS fiddle

在jQuery中记录点击次数？

2 个答案: