javascript - 强制单击处理程序识别多个元素

Question

基本上，当我单击 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，但没有发现任何区别。

Answer 1

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>