单击另一个元素时向元素添加 class

Question

我正在尝试在单击另一个元素时将 class 添加到一个元素。

这是一个弹出脚本，我试图通过切换 CSS 不透明度属性.

来实现

这是我的 HTML,

<span class="container">
  <span class="visible-text" onclick="addClassToPopUp()">
  </span>
  <span class="popup-text">
  </span>
</span>

并且重复多次。

页面上的可见文本包含在 .visible-text class 中，弹出文本包含在 .popup-text 中。 .popup-text class 的不透明度为零。

我想在单击 .visible-text 框时向 .popup-text 添加一个 class。 class 会将不透明度覆盖为 1。

现在我的问题，

我可以使用 document.getElementsByClassName("popup-text"); 获得所有 classes 的列表，但如何缩小当前列表的范围？

Answer 1

一种方法是限制在父元素中

function addClassToPopUp(elem) {
   var popUp = elem.parentNode.getElementsByClassName("popup-text")[0]; 
   popUp.classList.toggle("active");  
}

.popup-text {
   display:none;  
}

.popup-text.active {
   display:block;  
}

<span class="container">
  <span class="visible-text" onclick="addClassToPopUp(this)">Hello
  </span>
  <span class="popup-text">World
  </span>
</span>

单击另一个元素时向元素添加 class

Add a class to an element when another element is clicked

javascript

popup