Question

我试图从我创建的地图中找到相邻图块的data-x和data-y值到一个图块，而我只能从目标图块返回数据值。我如何能够引用特定的div元素，例如，data-x的值为clicked - 1，然后返回该位置的元素。

用于定义自定义数据属性的HTML代码如下：

 <div class="grass gameTile" data-x="0" data-y="0"></div>
            <div class="grass gameTile" data-x="1" data-y="0"></div>
            <div class="grass gameTile" data-x="2" data-y="0"></div>
            <div class="grass gameTile" data-x="3" data-y="0"></div>

......等等。

这个image更清楚地解释了我的意思，因为我试图点击红色div并找到绿色div的data-x和data-y的值到顶部，底部，左边和红色的权利。

Answer 1

您可以向父级添加一个，而不是为每个元素添加点击次数。美国目标是获得点击的内容。比你可以读取属性。比它是一个简单的querySelector，具有获取元素的属性。

document.getElementById("board").addEventListener("click", function (evt) {
   var tile = evt.target,
       x = +tile.getAttribute("data-x"),
       y = +tile.getAttribute("data-y"),
       tileTop = document.querySelector('[data-x="'+ (x) +'"][data-y="' + (y-1) + '"]'),
       tileBot = document.querySelector('[data-x="'+ (x) +'"][data-y="' + (y+1) + '"]'),
       tileRight = document.querySelector('[data-x="'+ (x+1) +'"][data-y="' + (y) + '"]'),
       tileLeft = document.querySelector('[data-x="'+ (x-1) +'"][data-y="' + (y) + '"]');
      
  console.log(tileTop, tileBot, tileRight, tileLeft);
  
});

.gameTile {
  background-color: green;
  border: 1px solid black;
  display: inline-block;
  width: 20px;
  height: 20px;
}

<div id="board">
  <div class="grass gameTile" data-x="0" data-y="0"></div>
  <div class="grass gameTile" data-x="1" data-y="0"></div>
  <div class="grass gameTile" data-x="2" data-y="0"></div>
  <div class="grass gameTile" data-x="3" data-y="0"></div>
  <br/>
  <div class="grass gameTile" data-x="0" data-y="1"></div>
  <div class="grass gameTile" data-x="1" data-y="1"></div>
  <div class="grass gameTile" data-x="2" data-y="1"></div>
  <div class="grass gameTile" data-x="3" data-y="1"></div>
  <br/>
  <div class="grass gameTile" data-x="0" data-y="2"></div>
  <div class="grass gameTile" data-x="1" data-y="2"></div>
  <div class="grass gameTile" data-x="2" data-y="2"></div>
  <div class="grass gameTile" data-x="3" data-y="2"></div>
  <br/>
  <div class="grass gameTile" data-x="0" data-y="3"></div>
  <div class="grass gameTile" data-x="1" data-y="3"></div>
  <div class="grass gameTile" data-x="2" data-y="3"></div>
  <div class="grass gameTile" data-x="3" data-y="3"></div>
</div>

Answer 2

这是一个使用jQuery的替代方案。

＆＃13;

$('.gameTile').click(function() {
  console.log($(this).attr('data-x'));
  console.log($(this).attr('data-y'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grass gameTile" data-x="0" data-y="0">0</div>
<div class="grass gameTile" data-x="1" data-y="0">1</div>
<div class="grass gameTile" data-x="2" data-y="0">2</div>
<div class="grass gameTile" data-x="3" data-y="0">3</div>

＆＃13;

通过JavaScript获取特定的数据属性？

2 个答案: