1

我正在制作一个基于网格的游戏，我希望用户能够单击网格中的每个可选块，以使相邻（水平、垂直、对角）块可选择并阻止选定块。所有选定块应该保持选中状态。我正在使用两个不同的类，称为 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'); 
});
4

2 回答 2

1

尝试

function markSelectable(el) {
    el.addClass('selectable');
}

var $grid = $('.grid')
$grid.on('click', '.selectable:not(.selected)', function() {
    var $this = $(this), ind = $this.index(), $parent = $this.parent(), count, filter;

    $('.selectable', $grid).removeClass('selectable');
    $this.addClass('selected');

    markSelectable($this.prev(':not(.selected)'));
    markSelectable($this.next(':not(.selected)'));

    count = ind == 0 ? 2 : 3;
    filter = '.block' + (ind > 1 ? ':gt(' + (ind - 2) + ')' : '') + ':lt('
            + count + '):not(.selected)';

    markSelectable($(filter, $parent.prev()));
    markSelectable($(filter, $parent.next()));
});

$('.block:first', $grid).addClass('selectable').trigger('click');

演示：小提琴

于 2013-03-21T09:45:08.263 回答
0

我用这个解决了它：

JS代码：

    $('#1').addClass('selected');

$('#2,#6,#7').addClass('selectable');

$(document).on('click','.selectable',function() {
$(this).addClass('selected').removeClass('selectable');
var ind=$(this).index();
$('.block').removeClass('selectable');
$(this).prev().addClass('selectable');
$(this).next().addClass('selectable');
if (ind!=0)
{
$(this).parent().prev().children().eq(ind-1).addClass('selectable');
$(this).parent().next().children().eq(ind-1).addClass('selectable');
}
$(this).parent().prev().children().eq(ind).addClass('selectable');
$(this).parent().next().children().eq(ind).addClass('selectable');
$(this).parent().prev().children().eq(ind+1).addClass('selectable');
$(this).parent().next().children().eq(ind+1).addClass('selectable');
$(this).parents().children('.selected.selectable').removeClass('selectable'); 
$(this).parents().siblings().children('.selected.selectable').removeClass('selectable'); 
$(this).parents().children('.selected').off('click');
$(this).parents().siblings().children('.selected').off('click');

});

小提琴：http: //jsfiddle.net/3DHMd/3/

于 2013-03-21T09:14:09.013 回答