jquery - 使用户按特定顺序单击元素

Question

我有一个由 20 个数字组成的网格的基本布局，（1-20）。我希望用户按数字顺序（1、2、3、4、5 等）单击元素，如果顺序正确，highlight类将从每个数字开始移动，例如：数字是红色的，如果用户单击,现在将变为红色，但如果用户在单击后单击（顺序错误），则不会发生任何事情。我已经布置好网格，给每个id 与其值相同的值，并且我给每个元素一个属性......我只是不确定如何让用户按顺序单击然后移动类...12231divdata-valuehighlight

这是我一直在使用的小提琴：带有点击顺序的数字网格

Answer 1

这样的事情应该让你开始：

(function($) {
    var currentNumber = 1;

    $(document).on('click', '.num', function() {
        var $this = $(this);

        if ($this.data('value') != currentNumber + 1) {
            return;
        }

        $('.highlight').removeClass('highlight');
        currentNumber++;
        $this.addClass('highlight');

        return false;
    });
})(jQuery);

http://jsfiddle.net/EB654/9/

Answer 2

检查这个小提琴

$(document).ready(function() {
    var counter = 2; //start at 2 if you don't want the user to click on 1

    for (i = 1; i < 21; i++) {
        $('#numbers').append('<div id="' + i + '" class="num ' + ((i == 1) ? 'highlight' : '') + '" data-value="' + i + '">' + i + '</div>');
    }

    $(".num").height($(document).height() / 5);
    $(".num").width($(document).width() / 4);

    $('.num').on('click', function() {
        if ($(this).data('value') == counter) {
            $('.num').removeClass('highlight');
            $(this).addClass('highlight');
            counter++;
        }

        return false;
    });

});

Answer 3

 $('.num').click(function() {
    var currentEle = $(this);
    var val = parseInt(currentEle.attr("data-value"),10);
    var prevEle = $(".num.highlight").first();
    var prev_val = parseInt(prevEle.attr("data-value"),10);
    if(++prev_val==val){
         prevEle.removeClass("highlight");
         currentEle.addClass("highlight");
    }

检查此链接http://jsfiddle.net/EB654/15/。

Answer 4

这是一个应该工作的小提琴 http://jsfiddle.net/ranjith19/EB654/28

用这个替换你的点击功能：

var i = 2;

$(".num").click(function(){
    clicked_val = $(this).attr("data-value")

    if (clicked_val != i){
          return 
    }

  $(this).addClass('highlight');
  i = i+1

})