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

Question

I am trying to find the data-x and data-y values of the adjacent tiles to a tile from a map that I have created, and I have only been able to return the data values from the targeted tile. How am I able to reference the specific div element that, for example, has the value of data-x clicked - 1, and then return the element that is at that location.

The HTML code for defining the custom data attributes are as follows:

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

...and so on.

This image explains what I mean more clearly, as I am trying to click on the red div and find the values of data-x and data-y of the green divs to the top, bottom, left and right of the red div.

Answer 1

Instead of adding clicks to every element, you can add one to the parent. US ent target to get what was clicked. Than you can read the attributes. Than it is a simple querySelector with attributes to get the elements.

 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

Here is a alternate that uses 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>