javascript - 单击另一个元素时向元素添加类

Question

这个问题已经有答案了:

Is there a way to select sibling nodes? (17 个回答)

已关闭 7 年前。

当单击另一个元素时，我试图向一个元素添加一个类。

这是一个弹出脚本，我尝试通过切换 CSS 不透明度属性来实现。

这是我的 HTML，

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

并且它会重复多次。

页面上的可见文本包含在 .visible-text 内类和弹出文本位于 .popup-text 内。 .popup-text的不透明度类为零。

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

现在我的问题，

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

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>