Question

我有20个数字网格的基本布局，（1-20）。我希望用户按数字顺序（1,2,3,4,5等等）单击元素，highlight类将从每个数字移动，如果它是正确的顺序，例如：数字1为红色，如果用户点击2，2现在将为红色，但如果用户点击{{1}点击3（错误的顺序）后，没有任何反应。我已经确定了网格布局，假设每个1的ID与其值相同，并且我已经为每个元素赋予了div属性... I＆I ＃39;我只是不确定如何让用户按顺序点击，然后移动data-value类......

这是我与之合作过的小提琴：Number grid with click order

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

检查this fiddle

$(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

})

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

4 个答案: