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";

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

Answer 2

要添加或删除类，您可以使用classList，以便您的代码从以下位置更改：

this.className += "activated";

收件人：

this.classList.add("activated");

摘要：

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].classList.remove('activated')
        }
        this.classList.add("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 3

您需要为激活的类（即" activated"）添加空间。

如何添加保持激活状态的活动类

3 个答案: