无法获取数据属性

Question

我试图在我的 JavaScript 中获取数据属性。但它未定义而不是真实的。

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);
  });
});

在这里，我应该在这里得到“真实”。 但为什么会出现 Undefined 呢？

Answer 1

编辑如果您不想更改 HTML，我在我的首选解决方案之后添加了另一个解决方案，即更改 HTML。

在 HTML 中，您必须将data-expand属性放在div元素中，是否有充分的理由？ 如果你可以把它放在同一个按钮中，当你点击它时，你有一个点击事件处理程序触发，那么你可以很容易地从该事件处理程序中可用的事件 object 中获取数据扩展的值。

我已经修改了您的 HTML 和 JavaScript 以表明我的意思：

 const readMore = document.querySelectorAll(".read"); const collapse = document.querySelectorAll(".collaspe"); readMore.forEach((read) => { read.addEventListener("click", function(event){ const para = event.target.dataset.expand; console.log(para); }); });

 <div class="card"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perferendis in temporibus reprehenderit. Vitae maxime, totam tempore </p> <button class="read" data-expand="true">Read More</button> <button class="collaspe">Collaspe</button> </div> <div class="card"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perferendis in temporibus reprehenderit. Vitae maxime, totam tempore </p> <button class="read" data-expand="true">Read More</button> <button class="collaspe">Collaspe</button> </div> <div class="card"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perferendis in temporibus reprehenderit. Vitae maxime, totam tempore </p> <button class="read" data-expand="true">Read More</button> <button class="collaspe">Collaspe</button> </div>

或者，您可以像这样从 HTML 中的事件 object 访问数据扩展属性的值：

 const readMore = document.querySelectorAll(".read"); const collapse = document.querySelectorAll(".collaspe"); readMore.forEach((read) => { read.addEventListener("click", function(event){ const para = event.target.parentElement.dataset.expand; console.log(para); }); });

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

无法获取数据属性

问题描述

1 个解决方案

解决方案1
1 2022-11-27 21:40:37

无法获取数据属性

问题描述

1 个解决方案

解决方案1 1 2022-11-27 21:40:37

解决方案1
1 2022-11-27 21:40:37