紛らわしいタイトルで申し訳ありませんが、詳しく説明します。私は 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>