Question

对于令人困惑的标题感到抱歉，我会更好地解释。我有一个20x20的div网格，所以它的400个都有一个id，从0到399.

每个div都有三个随机值中的一个 - 红色，绿色或蓝色 - 当点击div时，运行一个函数来检查左，右，上，下的div是否具有相同的值，如果它具有相同的值，则会模拟一次点击，同样的功能将再次运行。

问题是，该函数设置了变量，因此如果它发现下面的div具有相同的值，它将覆盖第一次点击设置的变量，因此永远不会点击任何其他变量。

这就是我所拥有的：

<!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>

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

Answer 2

您可以将点击计划到事件循环而不是直接调用它们，例如：

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

我不认为这是你的根本原因，它可能是全球变量和范围问题的组合。尝试重新格式化：

$('.box').click(function (event){
    var t = $(this), id, val, up, right, down, left, clickup, clickdown;
    //...

Answer 3

您的变量id和val不在var语句中，因此隐式创建为window对象的成员，而不是作用于本地函数。将每个分号前面的分号更改为逗号，以便它们成为var语句的一部分，并且代码应该开始工作。

Javascript使用不同的vars同时运行一个函数

3 个答案: