首页 > jquery如何判断3张图片都被点击过,并且是按顺序点击的

jquery如何判断3张图片都被点击过,并且是按顺序点击的

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/

【热门文章】
【热门文章】