JavaScriptを使用して特定のデータ属性を取得しますか？

Question

私が作成したマップから、隣接するタイルのdata-xとdata-yの値を見つけようとしましたが、ターゲットのタイルからデータ値を返すことしかできませんでした。たとえば、data-x clicked-1の値を持つ特定のdiv要素を参照し、その場所にある要素を返します。その上

<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> 

...とを次のように

カスタムデータ属性を定義するためのHTMLコードがあります。

このimageは、赤いdivをクリックして緑色のdivのdata-xとdata-yの値を上、下、左、右に表示しようとしているので、赤いdiv。

Answer 1

代わりのすべての要素にクリックを追加して、あなたは親に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を使用する別の方法を示します。

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

<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>