javascript - 在预定义集中插入动态项目

Question

HTML

<button class='button' data-next="games" data-parent="games1" data-storage="128" data-graphcard="2" data-processor="i3">Click here</button>

杰斯。

let hardware = ["storage", "graphcard", "processor"];
const allButtonsToStore = document.querySelectorAll('.button');

allButtonsToStore.forEach((el, i) => {
  el.addEventListener('click', () => {
    hardware.forEach((item) => {
      console.log(`${el.dataset.item}`);
    });
  });
});

我想要做的是从数组中获取每个项目并使用它来查找 html 中的数据。
${el.dataset.*} 其中“*”= 数组的项目。
因此:获取按钮的数据集存储、图形卡和处理器的值。这将是 ${el.dataset.storage} 、 ${el.dataset.graphcard} 和 ${el.dataset.processor} 。为了不写入数组的所有项目，我尝试获取数组中的所有项目 (hardware.forEach((item)) 并放入 ${el.dataset .item}

但是由于 .`${el.dataset.item}`. 被“``”封装，我无法在“${el.dataset.<”之后转义”，插入实际的 item 并再次捕获它，以便使用 }

发送该行

我尝试了诸如 ${el.dataset."item"} 、 ${el.dataset.[item]} 或 ${el. dataset.(item)} 但这不起作用。

Answer 1

您几乎得到了正确的结果:语法上正确的括号表示法是 ${el.dataset[item]} — 即dataset 和 [item] 之间没有额外的 .。请参阅此处的概念验证:

let hardware = ["storage", "graphcard", "processor"];
const allButtonsToStore = document.querySelectorAll('.button');

allButtonsToStore.forEach((el, i) => {
  el.addEventListener('click', () => {
    hardware.forEach((item) => {
      console.log(`${el.dataset[item]}`);
    });
  });
});

<button class='button' data-next="games" data-parent="games1" data-storage="128" data-graphcard="2" data-processor="i3">Click here</button>