Question

因此，我希望能够检测网格中的相邻切片，其中每个切片都有一个从{1}开始的data-id属性。

这是代码：

HTML

<div class="grid"></div>

JS

var rows = 7;
var cols = 9;
var size = 50;

$('.grid').css({
    width: size*rows+'px',
  height: size*cols+'px'
});

for(var i = 0; i < rows*cols; i++){
    $('.grid').append('<div class="tile" data-id="'+(i+1)+'" style="width: '+size+'px; height: '+size+'px"><span>'+(i+1)+'</span></div>');
}

function checkAdjacentPossibilities(id){
    i = parseInt(id);
    var array = [];
    if(i==1){
    array.push(false, false, true, true)
    }else if (i>1 && i<rows){
        array.push(false, true, true, true);
    }else if (i==rows){
        array.push(false, true, false, true);
    }else if (i%rows==1 && i>1 && i<(rows*cols)-rows){
        array.push(true, false, true, true);
    }else if(i==(rows*cols)-rows+1){
        array.push(true, false, true, false);
    }else if(i>(rows*cols)-rows+1 && i < rows*cols){
        array.push(true, true, true, false);
    }else if(i==rows*cols){
        array.push(true, true, false, false);
    }else if(i%rows==0 && i>rows && i<rows*cols){
        array.push(true, true, false, true);
    }else{
        array.push(true, true, true, true);
    }

  $('.tile').css('background', 'transparent');

  for(var n = 0; n < array.length; n++){
    var index = n;
    var value = array[n];

    if(value){
        if(index==0){
            $('.tile[data-id="'+(i-rows)+'"]').css('background', 'red');
      }else if(index==1){
        $('.tile[data-id="'+(i-1)+'"]').css('background', 'red');
      }else if(index==2){
        $('.tile[data-id="'+(i+1)+'"]').css('background', 'red');
      }else{
        $('.tile[data-id="'+(i+rows)+'"]').css('background', 'red');
      }
    }


  }

}

$(document).on('click', '.tile', function(){
    var $this  = $(this);
  var id = $this.attr('data-id');
  checkAdjacentPossibilities(id);
});

我将所有9种可能性硬编码到if / else语句中：

4个角落
顶部瓷砖
left tiles
底瓦
右侧瓷砖
中心区块

有更有效的方法吗？提前致谢

Answer 1

这些检查是不必要的。如果元素存在，jQuery会对元素进行任何处理。所以，你所要做的就是何时改变颜色。

function checkAdjacentPossibilities(id){
  i = parseInt(id);
  $('.tile').css('background', 'transparent');
  $('.tile[data-id="'+(i-rows)+'"]').css('background', 'red');
  (i-1) % rows === 0 || $('.tile[data-id="'+(i-1)+'"]').css('background', 'red');
  i % rows === 0 || $('.tile[data-id="'+(i+1)+'"]').css('background', 'red');
  $('.tile[data-id="'+(i+rows)+'"]').css('background', 'red');
}

检查fiddle

<强>更新

按照相同的步骤保存相邻的单元格

var adjacentCells = [];
function changeCellColor(adjacentCells) {
  adjacentCells.forEach(function(id) {
    $('.tile[data-id="' + id + '"]').css('background', 'red');
  })
}
function checkAdjacentPossibilities(id){
  i = parseInt(id);
  $('.tile').css('background', 'transparent');
  adjacentCells.push(i - rows, i + rows);
  (i-1) % rows !== 0 &&  adjacentCells.push(i - 1);
  i % rows !== 0 &&  adjacentCells.push(i + 1);
  changeCellColor(adjacentCells);
}

检查fiddle

在javascript中检查网格中相邻切片的有效方法

1 个答案: