如何通过类名修改元素display属性？代码问题求解答

你的需求是点击类名为box的元素时，隐藏自身并显示下一个兄弟元素，原代码的问题主要出在JavaScript部分，下面逐一说明错误并给出修正方案：

原JS代码的错误点 #

• 未定义element变量：函数里直接使用element，但这个变量既没有声明，也没传入点击的目标元素
• 错误使用hasClass：这是jQuery框架的方法，原生JavaScript检查元素类名需要用classList.contains()
• this.element和nextElementSibling写法错误：内联事件绑定的函数中this默认指向window，且nextElementSibling必须通过具体元素来获取

修正后的完整代码 #

CSS（无需修改） #

.box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}

#box2 {
  display: none;
  background-color: blue;
}

HTML（修改点击事件，传入当前元素） #

<div class="box" id="box" onclick="myFunction(this)">
  <p>text text text text text</p>
</div>
<div class="box" id="box2">
  <p>text text text text text text text text text text</p>
</div>

JavaScript（修正逻辑） #

function myFunction(clickedElement) {
  // 可选：检查点击的元素是否包含box类（因事件绑定在box元素上，此判断可省略）
  if (clickedElement.classList.contains("box")) {
    clickedElement.style.display = "none";
    // 获取下一个兄弟元素并显示，先判断是否存在避免报错
    const nextSibling = clickedElement.nextElementSibling;
    if (nextSibling) {
      nextSibling.style.display = "block";
    }
  }
}

额外优化（可选） #

如果想让所有box元素自动绑定点击事件，不用手动写onclick属性，可以用批量绑定的方式：

// 页面加载完成后执行绑定
document.addEventListener('DOMContentLoaded', function() {
  const boxes = document.querySelectorAll('.box');
  boxes.forEach(box => {
    box.addEventListener('click', function() {
      this.style.display = 'none';
      const nextSibling = this.nextElementSibling;
      if (nextSibling) {
        nextSibling.style.display = 'block';
      }
    });
  });
});

对应的HTML可去掉onclick属性：

<div class="box" id="box">
  <p>text text text text text</p>
</div>
<div class="box" id="box2">
  <p>text text text text text text text text text text</p>
</div>

内容的提问来源于stack exchange，提问作者David F