javascript - 如何添加保持激活状态的事件类

Question

嘿，我网站的一部分有一个比较奇怪的问题。我包括了不再起作用的部分。通常，按钮应保持相同大小，并且在单击时应呈深蓝色。但是现在，它只有一个基本的 html 按钮。这很奇怪，因为几天前代码工作得很好，我什么也没做。

var header = document.getElementById("flex-wrapper-zahlung");
var btns = header.getElementsByClassName("accordion-zahlung");
for (var y = 0; y < btns.length; y++) {
  btns[y].addEventListener("click", function() {
    var current = document.getElementsByClassName("activated");
    if (current.length > 0) {
      current[0].className = current[0].className.replace("activated", "");
    }
    this.className += "activated";
  });
}

.flex-wrapper-zahlung {
  margin: 0 0 0 0;
  width: 24em;
}

.accordion-zahlung {
  display: flex;
  background-color: #ededed;
  color: black;
  cursor: pointer;
  padding: .75em;
  width: 30em;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
  font-weight: 500;
  transition: 0.4s;
  margin: .5em 0 0 0;
  border-radius: .5em;
}

.activated,
.accordion-zahlung:hover {
  background-color: #092a5e;
  color: white;
}

<div id="flex-wrapper-zahlung">
  <button class="accordion-zahlung"><i class="far fa-credit-card"></i> &nbsp; &nbsp; Kreditkarte</button>
  <button class="accordion-zahlung"> <i class="fas fa-file-invoice"></i> &nbsp; &nbsp; &nbsp; Lastschrift</button>
  <button class="accordion-zahlung"><i class="fab fa-paypal"></i> &nbsp; &nbsp; &nbsp; PayPal</button>
  <button class="accordion-zahlung"><i class="fas fa-money-check"></i> &nbsp; &nbsp; Rechnung</button>

</div>

Answer 1

通过查看您的代码，我认为您在更新 className 时只是缺少一个空格。 :试试 this.className += " activated";而不是 this.className += "activated";

使用您的代码，按钮的新类名将变为 <button class="accordion-zahlungactivated"> .