我试图在我的JavaScript中获得数据属性。但是它是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);
});
});
这里我应该得到"true"在这里。但是为什么会出现Undefined呢?
编辑如果你不想改变你的HTML，我在我的首选解决方案之后添加了另一个解决方案，即改变HTML。
在HTML中，为什么必须在div元素中放置data-expand属性?如果你能把它放在同一个按钮中，当你点击它时，你有一个点击事件处理程序触发，那么你可以很容易地从事件处理程序中可用的事件对象中获得数据扩展的值。我已经修改了你的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>或者，您可以访问data-expand属性的值，从HTML中的事件对象，像这样:
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>