抱歉标题令人困惑，我会更好地解释。 我有一个 20x20 的 div 网格，所以它有 400 个，每个都有一个 id，从 0 到 399。
每个 div 都被赋予三个随机值之一 - 红色、绿色或蓝色 - 当单击一个 div 时，将运行一个函数来检查左侧、右侧、上方和下方的 div 是否具有相同的值，如果它具有相同的值，它将被模拟一次点击并且相同的功能将再次运行。
问题是函数设置了变量，所以如果它发现下面的 div 有相同的值，它会覆盖第一次点击设置的变量，因此永远不会点击任何其他的。
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>
最佳答案
我认为你的问题的最大根本原因是你没有检查它是否已经有类'clicked'。这可以使无限递归。例如，如果您点击 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();
}
});
关于Javascript 使用不同的变量同时运行一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13502279/