1

20 個の数字 (1-20) のグリッドのこの基本的なレイアウトがあります。ユーザーに要素を番号順にクリックしてもらいたい (1、2、3、4、5 など)。正しい順序であればhighlight、クラスは各番号から移動します。例: 番号は赤です。ユーザーが をクリックすると、が赤くなりますが、ユーザーがクリックした後に(間違った順序で) クリックすると、何も起こりません。それぞれのIDが値と同じであることを考慮して、グリッドをレイアウトし、各要素に属性を指定しました...ユーザーが順番にクリックしてからクラスを移動する方法がわかりません...12231divdata-valuehighlight

ここに私が取り組んできた私のフィドルがあります:クリック順の数値グリッド

4

4 に答える 4

4

このような何かがあなたを始めるはずです：

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

于 2012-10-17T17:23:19.947 に答える
4

このフィドルをチェックしてください

$(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;
    });

});
于 2012-10-17T17:24:26.267 に答える
1 
 $('.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/を確認してください。

于 2012-10-17T17:28:57.160 に答える
0

これは動作するはずのフィドルです 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

})
于 2012-10-17T17:32:49.843 に答える