1

紛らわしいタイトルで申し訳ありませんが、詳しく説明します。私は 20x20 の div グリッドを持っているので、それぞれに 400 個の id があり、0 から 399 までです。

各 div には 3 つのランダム値 (赤、緑、青) のいずれかが与えられ、div をクリックすると、左、右、上、下の div が同じ値であるかどうかをチェックする関数が実行されます。同じ値の場合、クリックがシミュレートされ、同じ機能が再度実行されます。

問題は、関数が vars を設定することです。そのため、下の div が同じ値であることがわかった場合、最初のクリックで設定された vars が上書きされるため、他のいずれもクリックしないでください。

JSfiddle - http://jsfiddle.net/5e52s/

これが私が持っているものです:

<!DOCTYPE html>  
<html lang="en">  
<head>
    <meta charset="utf-8"/>
    <title>untiteled</title>
    <style>
        body {
            width: 420px;
        }
        .box {
            width: 19px;
            height: 19px;
            border: 1px solid #fafafa;
            float: left;
        }

        .box:hover {
            border: 1px solid #333;
        }

        .clicked {
            background: #bada55 !important;
        }

    </style>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>

        $().ready(function(){
            var colors = ['red', 'green', 'blue'];
            var i = 0;
            while(i<400){
                var color = colors[Math.floor(Math.random() * colors.length)];
                $('.test').append('<div class="box" id="'+i+'" value="'+color+'" style="background:'+color+';">'+i+'</div>');
                i++;
            }

            $('.box').click(function(){
                var t = $(this);
                t.addClass('clicked');
                id = t.attr('id');
                val = t.attr('value');

                //Set color

                up = parseInt(id) - 20;
                right = parseInt(id) + 1;
                down = parseInt(id) + 20;
                left = parseInt(id) - 1;
                clickup = false;
                clickdown = false;
                if($('#'+down).attr('value') === val){
                    clickdown = true;
                }
                if(up > -1 && ($('#'+up).attr('value') === val)){
                    clickup = true;
                }

                if(clickdown == true){
                    $('#'+down).click();
                }
                if(clickup == true){
                    $('#'+up).click();
                }







            });
        });

    </script>
</head>
<body>
    <div class="test">

    </div>      
</body>

4

3 に答える 3

1

問題の最大の根本原因は、クラスが既に「クリック」されているかどうかを確認していないことだと思います。これにより、無限再帰が発生する可能性があります。たとえば、div#2 をクリックすると、div#1 はシミュレートされたクリックを受け取り、div#2 は div#1 からシミュレートされたクリックを受け取ります。

$('.box').click(function(){
    var t = $(this);
    if(t.hasClass('clicked')) {
        return;
    }

    t.addClass('clicked');
    var id = t.attr('id');
    var val = t.attr('value');

    //Set color

    var up = parseInt(id) - 20;
    var right = (id%20 != 19) ? ((0|id) + 1) : 'nothing' ;
    var down = parseInt(id) + 20;
    var left = (id%20 != 0) ? ((0|id) - 1) : 'nothing';

    console.log(up, right, down, left);

    if($('#'+down).attr('value') === val) {
       $('#'+down).click();                    
    }
    if($('#'+right).attr('value') === val) {
       $('#'+right).click();                    
    } 
    if($('#'+up).attr('value') === val) {
       $('#'+up).click();                    
    }
    if($('#'+left).attr('value') === val) {
       $('#'+left).click();                    
    }
});
于 2012-11-22T19:15:23.220 に答える
0

クリックを直接呼び出す代わりに、イベントループへのクリックをスケジュールできます。例:

            if(clickdown == true){
                setTimeout(function () {
                  $('#'+down).click();
                });
            }

それがあなたの根本的な原因ではないと思いますが、おそらくグローバル変数とスコープの問題の組み合わせです。そのように再フォーマットしてみてください:

$('.box').click(function (event){
    var t = $(this), id, val, up, right, down, left, clickup, clickdown;
    //...
于 2012-11-21T21:29:50.817 に答える
0

変数idvalはステートメントに含まれていないため、ローカル関数にスコープされるのではなくvar、オブジェクトのメンバーとして暗黙的に作成されます。windowそれぞれの行の前にあるセミコロンをコンマに変更して、それらが var ステートメントの一部になるようにすると、コードが機能し始めるはずです。

于 2012-11-21T22:09:24.300 に答える