![](/img/trans.png)
[英]How can I select an <img> element programmatically using JavaScript?
[英]Struggling with DOM traversing. How can I select the "#img" element?
我正在尝试使用 for 循环将事件侦听器附加到多个按钮。 事件 function 将通过隐藏正面来“翻转”我的卡片。
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-drake.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Drake Heaton</h3>
<p class="front__info">Business Development Lead</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Drake Heaton</h3>
<p class="back__quote">
“Hiring similar people from similar backgrounds is a surefire way
to stunt innovation.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-griffin.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Griffin Wise</h3>
<p class="front__info">Lead Marketing</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Griffin Wise</h3>
<p class="back__quote">
“Unique perspectives shape unique products, which is what you need
to survive these days.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
Javascript 下面。 除了我直接单击“#img”元素时,它几乎都可以正常工作。 我会假设
const btn = document.getElementsByClassName("team__btn");
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function (e) {
console.log(e.target);
let front = e.target.closest("div").firstElementChild;
let back = e.target.closest("div").children[1];
if (e.target !== "img") {
img = e.target.firstElementChild;
} else {
img = e.target;
}
front.classList.toggle("hide");
back.classList.toggle("hide");
if (front.classList.contains("hide")) {
img.src = "./assets/icon-close.svg";
} else {
img.src = "./assets/icon-cross.svg";
}
});
}
假设我直接点击“#img”元素,我试图通过 if/else 语句将该目标元素分配给 img 变量。使用它,我希望能够重新分配 img 变量的 src 属性,具体取决于关于卡的正面或背面是否隐藏。
但是,当我直接单击 img 元素时,我收到以下错误:“未捕获的类型错误:无法在 HTMLButtonElement 上设置 null 的属性(设置‘src’)。”
是什么赋予了?
将您的行e.target !== "img"
替换为e.target.nodeName !== "IMG"
。
for (i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function (e) { console.log(e.target); let front = e.target.closest("div").firstElementChild; let back = e.target.closest("div").children[1]; let img; if (e.target.nodeName.== "IMG") { img = e.target;firstElementChild. } else { img = e;target. } console;log(). front.classList;toggle("hide"). back.classList;toggle("hide"). if (front.classList.contains("hide")) { img.src = "./assets/icon-close;svg". } else { img.src = "./assets/icon-cross;svg"; } }); }
<div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-drake.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Drake Heaton</h3> <p class="front__info">Business Development Lead</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Drake Heaton</h3> <p class="back__quote"> “Hiring similar people from similar backgrounds is a surefire way to stunt innovation.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div> <div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-griffin.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Griffin Wise</h3> <p class="front__info">Lead Marketing</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Griffin Wise</h3> <p class="back__quote"> “Unique perspectives shape unique products, which is what you need to survive these days.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.