使用动态获取的属性值查找 DOM 元素？

Question

已经存在关于使用属性值获取 dom 元素的问题。但是我的不一样，因为我的属性值是事先不知道的。

<div class='gameBoard'>
   <div class="grid" index='0'></div>
   <div class="grid" index='1'></div>
   <div class="grid" index='2'></div>
   <div class="grid" index='3'></div>
   <!-- Goes up to 100 div / 99 index values -->
</div>

我有一个 div 游戏板代表一个 dom 元素，其中包含 100 个 div，每个元素的索引值从 0 到 99。下面我循环遍历所有 divs，当鼠标悬停在 div 上时，我得到了它的索引 ( data-attribute )。（如果方向在x轴上，那么我这样做）

            const one = el;
            const onei = el.getAttribute('index');
            const two = el.nextElementSibling;
            const twoi = two.getAttribute('index');

但是当方向在 y 轴上时，我不需要下一个 div 元素，而是下面的那个。例如：如果索引为 0，我需要 0 + 10 = 10，所以我需要索引为 10 的 div。我尝试了下面的代码，但它不起作用，因为值是动态检索的，我尝试使用字符串插值，它不起作用。所以请帮忙!!!

    const grids = document.querySelectorAll('.grid');

    el.addEventListener('mouseover', (e) => {
    if (foo === 'destroyer' || foo === 'submarine') {
       if (currentDirection === 'Y') {
            const one = el;
            const onei = Number(el.getAttribute('index'));
            const twoi = onei + 10;
            const two = document.querySelector("[index='twoi']");
            console.log(two, twoi);
        }
    }
});

Answer 1

querySelector 中的字符串 concatenation 错误

该行应该使用以下代码

const two = document.querySelector(`[index="${twoi}"]`);

Answer 2

您的问题是字符串插值问题。您实际上是在寻找具有索引 twoi 的元素。相反，尝试用反引号插入字符串，例如

const two = document.querySelector(`[index='${twoi}]'`);

或者只是将 twoi 字符串添加到其中：

const two = document.querySelector("[index=" + twoi + "]");

使用动态获取的属性值查找 DOM 元素？

Find a DOM Element using an attribute-value which is acquired dynamically?

html

javascript

dom

event-handling

dom-events