Question

我一直在用最终幻想IX和JS / jQuery构建基于Tetra Master的游戏，并且遇到了一个问题，即如何让卡（div）识别其周围的任何其他卡并获取他们的ID。 / p>

这是布局：https://codepen.io/ElecRei/pen/MEXZpd

HTML：

<div id="card_mat"></div>

    <br>

    <button id="submit" type="button" disabled>End Turn</button>

    <br><br>

JS / jQuery （在船上生成卡片的部分）：

var cardMat = document.getElementById("card_mat");

for(i=1; i <= 16; i++){

    $(cardMat).append("<div class='panel' id='" + i + "'><span></span></div>");
    console.log("Panel " + i + " created.");

}

所以卡片被放置成4x4网格，但目前它们基本上只是连续的卡片。我想要做的是，如果一张牌被放置在对手牌的旁边，你的牌可以识别它，尽管代码中它不在它旁边。

对于Example，如果我在第一个插槽中放了一张卡片，它可以在右边，右下角和底部给我卡片的ID。那么有什么方法可以用任何方式做到这一点或JS / jQuery无法做到这一点？

Answer 1

使用jQuerys .siblings();

如果您的卡片采用4x4网格，语法如

<div id="grid">
    <div id="card1"></div>
    <div id="card2"></div>
    <div id="card3"></div>
    <div id="card4"></div>
    ....
</div>

您可以使用.siblings()查看DOM元素周围的兄弟姐妹。

例如，

$("#card2").siblings().css( "background-color", "red" );

将card1，card3，card4，cardn...背景颜色更改为红色。

修改

您需要创建一个功能来完成它。仅使用一个jQuery方法无法完成。（也许可以）

我创建了一个函数来查找顶行的兄弟姐妹。其他行的过程类似。

我创建了一个Plunk来展示它。

观察Console.log()消息。

您可以详细了解.eq() here。

还详细了解.siblings() here。

Answer 2

对于更具动态性的解决方案（其中数组可以是NxN而不是4x4}），建议您使用x，{{1}识别每个元素并实现查找相邻元素的逻辑。这里有一些建议：

Get adjacent elements in a two-dimensional array?

静态解决方案将使用数组y包含您想要的信息。这意味着siblings_of将返回所有相邻图块的ID列表。

示例如下（运行代码段并单击磁贴以查看会发生什么）：

siblings_of[ id ]

var siblings_of = [];

siblings_of[1] = [2, 5, 6];
siblings_of[2] = [1, 3, 5, 6, 7];
siblings_of[3] = [2, 4, 6, 7, 8];
siblings_of[4] = [3, 7, 8];

siblings_of[5] = [1, 2, 6, 9, 10];
siblings_of[6] = [1, 2, 3, 5, 7, 9, 10, 11];
siblings_of[7] = [2, 3, 4, 6, 8, 10, 11, 12];
siblings_of[8] = [3, 4, 7, 11, 12];

siblings_of[9] = [5, 6, 10, 13, 14];
siblings_of[10] = [5, 6, 7, 9, 11, 13, 14, 15];
siblings_of[11] = [6, 7, 8, 10, 12, 14, 15, 16];
siblings_of[12] = [7, 8, 11, 15, 16];

siblings_of[13] = [9, 10, 14];
siblings_of[14] = [9, 10, 11, 13, 15];
siblings_of[15] = [10, 11, 12, 14, 16];
siblings_of[16] = [11, 12, 15];

function mark_siblings(id) {
  siblings_of[id].forEach(function(item) {
    $('#' + item).addClass('marked');
  });
}

function reset() {
  $('.selected').removeClass('selected');
  $('.marked').removeClass('marked');
}


$(document).ready(function() {
  $('.panel').on('click', function() {
    var id = $(this).attr('id');
    reset();
    $(this).addClass('selected');
    mark_siblings(id);
  })
});

.card_mat {
  width: 220px;
}

.panel {
  display: inline-block;
  border: 1px solid #cccccc;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.marked {
  background-color: #dddddd;
}

.selected {
 background-color: #aaaaaa;
}

如何让元素识别/识别它周围的其他元素？

2 个答案: