如何使用 class 切换功能在点击时更改和取消更改 CSS 按钮样式？

Question

我正在尝试编写一个代码来切换按钮的样式。起初，我以为我可以用 CSS 和活动选择器来做到这一点。但我也希望能够撤消单击时的更改，而活动选择器则不能。然后我想我可以用 JavaScript 和 class 切换功能来做到这一点。

不幸的是，我对JavaScript不是很熟悉。我写了一段代码，它部分有效，但它总是改变同一元素的样式（可能是因为它是具有特定 class 的第一个元素？）。

有没有一种方法可以构建一个灵活的函数，它可以应用于多个元素，具体取决于我点击的是哪个元素？

function testtoggle() {
 if(document.getElementById("testknop").className == "nietactief"){
 document.getElementById("testknop").className = "actief";
 } else {
  document.getElementById("testknop").className = "nietactief";
 }
}

button {
 cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
 background-color: #a8a8a8;
    border: 5px solid #ddd;
} 

.actief {
 background-color: purple;
 border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">3e</button>

</body>
</html>

Answer 1

您应该查看 JavaScript 中的 classList 功能。它使添加、删除和切换元素变得容易类。

// Get a list of all the buttons in the group
let buttons = Array.from(document.querySelectorAll('[type=button]'))

// For each button add a click event listener
// This allows us to remove the 'onclick' from the html
buttons.forEach(item => {
  item.addEventListener('click', e => {
    // When the button is clicked, remove the active state
    // Then add the inactive state
    buttons.forEach(button => {
      // If the current button does not equal the clicked button
      // Remove the active state class
      button != e.currentTarget && button.classList.remove("actief")
      button.classList.add("nietactief")
    })
    // Toggle the state of the clicked button
    item.classList.toggle("actief")
  })
})

button {
  cursor: pointer;
  padding: 16px;
  font-size: 16px;
  border-radius: 100%;
}

.nietactief {
  background-color: #a8a8a8;
  border: 5px solid #ddd;
}

.actief {
  background-color: purple;
  border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <button type="button" id="testknop" class="nietactief">1e</button>
  <button type="button" id="testknop" class="nietactief">2e</button>
  <button type="button" id="testknop" class="nietactief">3e</button>

</body>

</html>

Answer 2

您观察到的是 document.getElementById

的预期行为

您可以传递对触发事件的按钮的引用：

window.testtoggle = function(elmnt) {
  if(elmnt.className == "nietactief"){
    elmnt.className = "actief";
  } else {
    elmnt.className = "nietactief";
  }
}

button {
 cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
 background-color: #a8a8a8;
    border: 5px solid #ddd;
} 

.actief {
 background-color: purple;
 border: 5px solid green;
}

<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">3e</button>

或者您可以考虑 JQuery 获取所有符合特定条件的 dom 元素并更新其 class:

$("button").attr('class', 'newClass');

或其他客户端框架，如 vue.js

如何使用 class 切换功能在点击时更改和取消更改 CSS 按钮样式？

How to have a class toggle function to change and unchange a CSS button styling on click?

javascript

css

function

button

styling