Javascript同时运行一个函数，具有不同的值

对不起，这个令人困惑的标题，我会更好地解释。我有一个div的20x20格，所以它的400个每个都有一个id，从0到399.Javascript同时运行一个函数，具有不同的值

每个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>

来源

2012-11-21 Spoeken

我认为你的问题最大的根本原因是你不检查它是否已经有类'点击'或不。这可能会使无限递归。例如，如果您单击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-22 19:15:23 wrongite

哇，你太对了！我根本没有看到这个！做得好的人，非常感谢！ :) – Spoeken

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

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

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

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

来源

2012-11-21 21:29:50

这听起来是正确的，但即使当我做var富，酒吧等;它在第一个if（$（direction）.attr（'value'）=== val））{}之后停止，然后继续到下一个点击 – Spoeken

你的变量id和val不是一个var声明，从而为window对象，而不是作用域为本地成员函数中隐式创建。将每行之前的分号更改为逗号，以使它们成为var语句的一部分，并且您的代码应该开始工作。

来源

2012-11-21 22:09:24 ErikE

这是一个很好的建议，但由于某种原因，它没有区别。 – Spoeken

Javascript同时运行一个函数，具有不同的值

回答

相关问题