基本上,当我单击 div 中的特定 anchor 标记时,我希望隐藏单击的 div。无论出于何种原因,这适用于第一个 div,并且仅适用于此 div。当我单击任何其他 div 中的 anchor 标记时,没有任何反应。我什至没有在控制台中收到错误,所以我真的不明白我做错了什么。
这是我的代码:
document.querySelector(".closeWin").addEventListener("click", closeThisWin);
function closeThisWin() {
let winToClose = this.parentElement.parentElement;
winToClose.style.display = "none";
console.log(winToClose);
}
.window {
width: 210px; height: 110px;
background-color: lightseagreen;
text-align: center; margin: 6px auto;
}
.css { background-color: lightpink; }
.s { font-size: 25px; padding: 40px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
<div class="s">
<a class="closeWin">Click Here 1</a>
</div>
</div>
<div class="window css">
<div class="s">
<a class="closeWin">Click Here 2</a>
</div>
</div>
和 Codepen:https://codepen.io/janaejpeg/pen/ExawWrm
我尝试使用 jQuery,但没有发现任何区别。
最佳答案
querySelector
-> querySelectorAll
document.querySelectorAll(".closeWin").forEach(function(a) { a.addEventListener("click", closeThisWin)});
function closeThisWin() {
let winToClose = this.parentElement.parentElement;
winToClose.style.display = "none";
console.log(winToClose);
}
.window {
width: 210px; height: 110px;
background-color: lightseagreen;
text-align: center; margin: 6px auto;
}
.css { background-color: lightpink; }
.s { font-size: 25px; padding: 40px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
<div class="s">
<a class="closeWin">Click Here 1</a>
</div>
</div>
<div class="window css">
<div class="s">
<a class="closeWin">Click Here 2</a>
</div>
</div>
关于javascript - 强制单击处理程序识别多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59541453/