javascript通过按钮切换div样式显示

Question

嘿，我想知道是否有人可以帮助我弄清楚为什么我的通过 className 更改样式显示的功能不起作用，它适用于具有 ID 的人，但不适用于使用 class？

还想知道是否可以仅使用 javascript 将按钮类 onclick 从 btn-red 更改为 btn-green？

window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  if (c.style.display == null || c.style.display == "none") {
    c.style.display = "block";
  } else {
    c.style.display = "none";
  }
}

.btn {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background: #444;
  color: #eee;
  border: 0;
  font-size: 14px;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: all 0.15s ease-in-out;
}

.btn:hover,
.btn:active {
  background-color: #555;
  color: #fff;
}

.btn-green {
  background-color: #47950d;
}

.btn-green:hover,
.btn-green:active {
  background-color: #64b820;
}

.btn-red {
  background-color: #b3353c;
}

.btn-red:hover,
.btn-red:active {
  background-color: #cb575b;
}

<button id="display1" class="btn btn-red" onclick="toggleDisplayByID('hud-popup-overlay')">Toggle div 1</button>
<button id="display2" class="btn btn-red" onclick="toggleDisplayByID('hud-leaderboard')">Toggle div 2</button>
<button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-righ')">Toggle div 3</button>
<button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-left')">Toggle div 4</button>

<div id="hud-popup-overlay">
  <p>
    Something Here 1
  </p>
</div>

<div id="hud-leaderboard">
  <p>
    Something Here 2
  </p>
</div>

<div class="hud-bottom-righ">
  <p>
    Something Here 3
  </p>
</div>

<div class="hud-bottom-left">
  <p>
    Something Here 4
  </p>
</div>

Answer 1

两件事：

• 您的第四个元素的类名在 HTML 中不正确
• 第二个函数中有一个未定义的变量

getElementsByClassName() 时，您不是在处理单个元素。遍历列表并设置您的样式。

我更改了 toggleDisplayById 和 toggleDisplayByClass 参数，使其可以包含按钮的元素 ID。在每个函数中，它们通过以下方式获取按钮元素：

var b = document.getElementById(btnId);

另外，我创建了一个辅助函数来删除和添加样式：

function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }

window.toggleDisplayByID = function(btnId,id) {

      var e = document.getElementById(id);
      var b = document.getElementById(btnId);
      if (e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
        removeAndAddClass(b,'btn-green','btn-red');
      } else {
        e.style.display = "none";
        removeAndAddClass(b,'btn-red','btn-green');
      }
    }

    window.toggleDisplayByClass = function(btnId,className) {
      var c2 = Array.from(document.getElementsByClassName(className));            
      var b = document.getElementById(btnId);
      
      if(b.classList.contains('btn-red')){
        removeAndAddClass(b,'btn-red','btn-green');
      }else{
        removeAndAddClass(b,'btn-green','btn-red');
      }
      c2.forEach(c => {
        if (c.style.display == null || c.style.display == "none") {
          c.style.display = "block";
        } else {
          c.style.display = "none";
        }
      });
    }
 function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }

  .btn {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background: #444;
      color: #eee;
      border: 0;
      font-size: 14px;
      vertical-align: top;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      transition: all 0.15s ease-in-out;
    }

    .btn:hover,
    .btn:active {
      background-color: #555;
      color: #fff;
    }

    .btn-green {
      background-color: #47950d;
    }

    .btn-green:hover,
    .btn-green:active {
      background-color: #64b820;
    }

    .btn-red {
      background-color: #b3353c;
    }

    .btn-red:hover,
    .btn-red:active {
      background-color: #cb575b;
    }

    <button id="display1" class="btn btn-red" onclick="toggleDisplayByID('display1','hud-popup-overlay')">Toggle div 1</button>
    <button id="display2" class="btn btn-red" onclick="toggleDisplayByID('display2','hud-leaderboard')">Toggle div 2</button>
    <button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('display3','hud-bottom-righ')">Toggle div 3</button>
    <button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('display4','hud-bottom-left')">Toggle div 4</button>

    <div id="hud-popup-overlay">
      <p>
        Something Here 1
      </p>
    </div>

    <div id="hud-leaderboard">
      <p>
        Something Here 2
      </p>
    </div>

    <div class="hud-bottom-righ">
      <p>
        Something Here 3
      </p>
    </div>

    <div class="hud-bottom-left">
      <p>
        Something Here 4
      </p>
    </div>

希望这会有所帮助，

Answer 2

getElementsByClassName 返回一个类似数组的对象，因此您必须对其进行索引。

window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  c.forEach(function(x) {
      if (x.style.display == null || x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
}

Answer 3

至于您的第一个问题，它不起作用，因为 getElementsByClassName 返回一个元素数组，因此您必须对它们进行迭代。