jquery如何判断3张图片都被点击过,并且是按顺序点击的
<div class="button_click">
<img class="button_btn_01" src="images/button_btn_01.png" alt=""/>
<img class="button_btn_02" src="images/button_btn_01.png" alt=""/>
<img class="button_btn_03" src="images/button_btn_01.png" alt=""/>
</div>
<body>
<div class="button_click">
<img class="button_btn_01" src="http://su.bdimg.com/static/superpage/img/logo_white.png" alt=""/>
<img class="button_btn_02" src="http://su.bdimg.com/static/superpage/img/logo_white.png" alt=""/>
<img class="button_btn_03" src="http://su.bdimg.com/static/superpage/img/logo_white.png" alt=""/>
</div>
<script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>
<script>
$(function() {
var checkImage = (function() {
var cache = [], order='0123456789';
return function(e) {
var $target = e.target,
$currentTarget = e.currentTarget,
$children = $currentTarget.children,
len = $children.length;
for (i=0; i<len; i++) {
if ($target == $children[i]) {
cache.push(i); break;
}
}
(cache.length>len) && cache.splice(0, 1);
if (cache.length != len) return;
if (new RegExp(cache.join('')).test(order)) alert("YES")
}
}) ();
$('.button_click').click(checkImage);
});
</script>
</body>
我也来贡献一个思路……
http://jsfiddle.net/Lsa44/
var A = {
obj: $('#a input'),
prev: 0,
index: 0,
last: 0,
is_on: $(this).attr('data-on'),
run: function() {
A.index = A.obj.index($(this));
if (A.index > 0) {
A.prev = A.obj.eq(A.index - 1).attr('data-on');
if (A.prev) {
A.obj.removeAttr('data-on');
} else {
A.obj.eq(A.last).removeAttr('data-on');
alert('Retry');
return false;
}
} else {
A.obj.eq(A.last).removeAttr('data-on');
}
A.last = A.index;
$(this).attr('data-on', 1);
}
};
$('#a input').on('click', A.run);
不好意思,没看清楚你的问题,给了下面一个不太相关的答案。要判断的话其实也差不多,给所有图片增加两个属性data-clicked
, data-order
分别记录是否点击和点击的次序。给.button_click
增加一个data-start
属性,用于记录每次点击后的索引值,方便下一次点击读取顺序,具体看DEMO。
http://jsfiddle.net/SAGsV/
每个图片增加一个data-clicked
属性用于记录是否点击,点击一次就取反一次。.button_click
增加一个data-prev
属性,用于记录上一步点击的元素索引号。给个DEMO,看代码估计你能明白。
http://jsfiddle.net/kH55m/