我正在制作一个基于网格的游戏,我希望用户能够单击网格中的每个可选块,以使相邻(水平、垂直、对角)块可选择并阻止选定块。所有选定块应该保持选中状态。我正在使用两个不同的类,称为 selectable 和 selected 来区分。只有当前选定块的相邻块应该是可选择的。现在我想要与当前(最后一个)不相邻的所有可选元素被选中元素返回到它们的默认状态。像这样的东西(选择深蓝色,可选择浅蓝色):
我使用了一些 jQuery 遍历方法,但我被困在一个点上,我无法找出任何有效的代码。请帮忙!
小提琴:http: //jsfiddle.net/3DHMd/2/
HTML:
<div class="outer">
<div class="inner">
<div class="grid">
<div class="column" id="column1">
<div id="1" class="block"></div>
<div id="6" class="block"></div>
<div id="11" class="block"></div>
<div id="16" class="block"></div>
<div id="21" class="block"></div>
<div id="26" class="block"></div>
</div>
<div class="column" id="column2">
<div id="2" class="block"></div>
<div id="7" class="block"></div>
<div id="12" class="block"></div>
<div id="17" class="block"></div>
<div id="22" class="block"></div>
<div id="27" class="block"></div>
</div>
<div class="column" id="column3">
<div id="3" class="block"></div>
<div id="8" class="block"></div>
<div id="13" class="block"></div>
<div id="18" class="block"></div>
<div id="23" class="block"></div>
<div id="28" class="block"></div>
</div>
<div class="column" id="column4">
<div id="4" class="block"></div>
<div id="9" class="block"></div>
<div id="14" class="block"></div>
<div id="19" class="block"></div>
<div id="24" class="block"></div>
<div id="29" class="block"></div>
</div>
<div class="column" id="column5">
<div id="5" class="block"></div>
<div id="10" class="block"></div>
<div id="15" class="block"></div>
<div id="20" class="block"></div>
<div id="25" class="block"></div>
<div id="30" class="block"></div>
</div>
</div>
CSS:
html,body{
width:100%;
height:100%;
margin:0 auto;
cursor:default;
}
.outer {
position: relative;
display:table;
width:100%;
height:85.25%;
background-color:#959595;
}
.inner {
display:table-cell;
text-align:center;
width:100%;
height:85.25%;
}
.grid{
margin-top: 2%;
margin-right: auto;
margin-left: auto;
border:0.7em solid #778086;
width:93%;
height:90%;
background-color: #B3B1B1;
clear:both;
}
.column{
width:20%;
height:100%;
float: left;
}
.block {
width:100%;
height:16.15%;
border: 0.1em solid #778086;
text-align: center;
font-size: 1.3em;
font-family: 'Roboto', sans-serif;
line-height: 2.8em;
}
.selected {
background-color:#2976A2;
color:#FFFFFF;
}
.selectable {
cursor: pointer;
cursor: hand;
background-color:#8DBFC4;
color:#FFFFFF;
}
JS:
$('#1').addClass('selected');
$('#2,#6,#7').addClass('selectable');
$(document).on('click','.selectable',function() {
$(this).toggleClass('selected').toggleClass('selectable');
var ind=$(this).index();
$(this).prev().toggleClass('selectable');
$(this).next().toggleClass('selectable');
if (ind!=0)
{
$(this).parent().prev().children().eq(ind-1).toggleClass('selectable');
$(this).parent().next().children().eq(ind-1).toggleClass('selectable');
}
$(this).parent().prev().children().eq(ind).toggleClass('selectable');
$(this).parent().next().children().eq(ind).toggleClass('selectable');
$(this).parent().prev().children().eq(ind+1).toggleClass('selectable');
$(this).parent().next().children().eq(ind+1).toggleClass('selectable');
$(this).parents().children('.selected.selectable').removeClass('selectable'); $(this).parents().siblings().children('.selected.selectable').removeClass('selectable');
});