JavaScript获取data-expand属性返回undefined的原因排查

我尝试在JavaScript中获取元素的data属性，但返回的是undefined而非预期的true。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="main.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <section>
      <div class="container">
        <div class="card" data-expand="true">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            perferendis in temporibus reprehenderit. Vitae maxime, totam tempore
          </p>
          <button class="read">Read More</button>
          <button class="collaspe">Collaspe</button>
        </div>
        <div class="card" data-expand="true">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            perferendis in temporibus reprehenderit. Vitae maxime, totam tempore
          </p>
          <button class="read">Read More</button>
          <button class="collaspe">Collaspe</button>
        </div>
        <div class="card" data-expand="true">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            perferendis in temporibus reprehenderit. Vitae maxime, totam tempore
          </p>
          <button class="read">Read More</button>
          <button class="collaspe">Collaspe</button>
        </div>
      </div>
    </section>
  </body>
</html>

JavaScript代码 #

const readMore = document.querySelectorAll(".read");
const collapse = document.querySelectorAll(".collaspe");
const card = document.querySelectorAll(".card");
const para = card.forEach((el) => {
  el.getAttribute("data-expand");
});

readMore.forEach((read) => {
  read.addEventListener("click", () => {
    console.log(para);
  });
});

问题原因及解决方法 #

核心问题 #

1. forEach无返回值：Array.prototype.forEach()方法本身不会返回任何值（默认返回undefined），所以你把forEach的结果赋值给para，para自然就是undefined。哪怕你在forEach的回调里调用了el.getAttribute("data-expand")，这个值也没有被收集或保存下来。

2. 未关联点击按钮与对应卡片：当前代码提前遍历所有卡片获取属性，但点击按钮时需要的是当前按钮所属卡片的data-expand值，而不是所有卡片的集合（就算收集了也不是点击时需要的单个值）。

正确实现方式 #

方式1：收集所有卡片的data属性值（如果需要批量保存）

用map替代forEach，map会返回新数组，包含每个卡片的data-expand值：

const card = document.querySelectorAll(".card");
// 用map收集所有data-expand属性值
const expandStates = Array.from(card).map(el => el.getAttribute("data-expand"));

readMore.forEach((read, index) => {
  read.addEventListener("click", () => {
    // 根据按钮索引对应到卡片的属性值
    console.log(expandStates[index]);
  });
});

方式2：点击时直接获取对应卡片的属性（更合理）

利用DOM的层级关系，点击按钮时向上查找所属的.card元素，再获取其data属性：

readMore.forEach((read) => {
  read.addEventListener("click", () => {
    // 找到当前按钮的父级card元素
    const currentCard = read.closest(".card");
    // 获取data-expand属性，或者用dataset更便捷
    const expandState = currentCard.getAttribute("data-expand");
    // 也可以用dataset：currentCard.dataset.expand
    console.log(expandState);
  });
});

注意：dataset获取的属性值是字符串类型，如果你需要布尔值，记得转换：Boolean(currentCard.dataset.expand)或者直接判断currentCard.dataset.expand === "true"。

内容的提问来源于stack exchange，提问作者Kill Hell