jquery - 让用户按一定顺序点击元素

Question

我有一个由 20 个数字 (1-20) 组成的网格的基本布局。我希望用户按数字顺序单击元素(1、2、3、4、5 等...)，并且 highlight 类将从每个数字移动，if 这是正确的顺序，例如:数字 1 是红色的，如果用户单击 2，2 现在将是红色的，但是如果用户在单击 1 (错误顺序)后单击 3，则不会发生任何情况。我已经布局了网格，给每个 div 的 id 与其值相同，并且我给每个元素一个 data-value 属性...我我只是不确定如何让用户按顺序单击，然后移动 highlight 类...

这是我一直在使用的 fiddle :Number grid with click order

Answer 1

检查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;
    });

});