Question

我试图在点击另一个元素时向元素添加一个类。

这是一个弹出式脚本，我试图通过切换CSS opacity属性来实现。

这是我的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>

单击另一个元素时，向该元素添加一个类

1 个答案: