用JavaScript改变按钮的class和div的显示

Question

我有 JavaScript 在点击时显示/隐藏 div。 在那个 div 里面有更多的按钮来显示/隐藏 PNG。

我希望单击的按钮具有底部边框线，直到单击该 div 中的另一个按钮。

我已经做到了这一点，但每次我点击显示的 div 中的一个按钮时，当我点击下一个按钮时，底部边框线会停留在按钮上。

我花了几个小时试图解决这个问题。 请帮忙

let wildCard = document.querySelectorAll(".element-select-container button");
for (let button of wildCard) {
  button.addEventListener('click', (e) => {
    const et = e.target;
    const active = document.querySelector(".active");
    let redline = (".redline");


    if (active) {

    active.classList.remove("redline");
      active.classList.remove("active");

      }

      et.classList.add("active");
      et.classList.add("redline");

      let allContent = document.querySelectorAll('.button-wrapper');

          for (let content of allContent) {

      if(content.getAttribute('data-e') === button.getAttribute('data-e')) {
        content.style.display = "block";

      }

      else {
        content.style.display = "none";

     }
     }
   });
}

HTML

<div class="element-select-container">
<button id="but81" class="but81 redline" data-e="81"     type="button" name="">Doors</button>
<button id="but82" class="but82" data-e="82" type="button" name="">Windows</button>
<button id="but83" class="but83" data-e="83" type="button" name="">Facia</button>
<button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button>

<button id="but85" class="but85" data-e="85" type="button"   name="">Garage</button>
<button id="but86" class="but86" data-e="86" type="button"    name="">Steps</button>
</div>

CSS

.redline {
border-bottom: 2px solid red;
}

Answer 1

问题是，在第一次加载时，第一个按钮是redline但不是active的 - 所以，当你按下不同的按钮时，从active中删除redline的代码找不到active的，所以redline没有被删除

简单的修复

const active = document.querySelector(".active,.redline");

如下

 let wildCard = document.querySelectorAll(".element-select-container button"); for (let button of wildCard) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active,.redline"); if (active) { active.classList.remove("redline"); active.classList.remove("active"); } et.classList.add("active"); et.classList.add("redline"); let allContent = document.querySelectorAll('.button-wrapper'); for (let content of allContent) { if(content.getAttribute('data-e') === button.getAttribute('data-e')) { content.style.display = "block"; } else { content.style.display = "none"; } } }); }

 .redline { border-bottom: 2px solid red; }

 <div class="element-select-container"> <button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button> <button id="but82" class="but82" data-e="82" type="button" name="">Windows</button> <button id="but83" class="but83" data-e="83" type="button" name="">Facia</button> <button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button> <button id="but85" class="but85" data-e="85" type="button" name="">Garage</button> <button id="but86" class="but86" data-e="86" type="button" name="">Steps</button> </div>