javascript - 在 jQuery 中记录点击顺序？

Question

我最初有一组颜色 ['red', 'yellow', 'green', 'blue']，它被改组为，比方说，["green ", "红", "黄",​​ "蓝"]。

现在，我有交互式框，用户可以在其中单击这些框。

打乱后的数组的第一个元素通过 for 循环显示，我现在想提示用户点击一个框，如果它与这种颜色匹配，则它是“正确的”并且想要如果没有继续循环，这是“错误的”，要暂停循环，直到他点击正确的颜色框。

我希望它遍历整个框，直到所有颜色都被正确识别。

我无法弄清楚编写上述语句的代码。

请看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 是颜色数组的正确顺序

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

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

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

希望对您有所帮助