1

抱歉标题混乱，我会解释得更好。我有一个 20x20 的 div 网格，所以它有 400 个，每个都有一个 id，从 0 到 399。

每个 div 被赋予三个随机值之一 - 红色、绿色或蓝色 - 当单击 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

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

于 2012-11-21T22:09:24.300 回答