Question

我有一个页面上有20个按钮的列表。当我点击一个按钮时，我希望它切换到"active"状态。在这种活跃状态下，它将是一种不同的颜色。我想只使用香草javascript和css来做这件事。

我有以下代码来创建按钮：

var button;
createButtons();

function createButtons() {
  for (i = 0; i < 20; i++) {
    //creates a new button
    button = document.createElement('Button');

    //sets correct button number and button text
    var index = i + 1;
    var text = document.createTextNode('Button ' + index);
    button.appendChild(text);
    button.className += "button";
    button.className += " default-button";
    document.body.appendChild(button);
  }
}

Answer 1

假设您一次只需要一个按钮＆＃34;激活＆＃34; ，我只会使用CSS :focus / :active伪类。例如

＆＃13;

for (let i = 1; i <= 20; i++) {
  let btn = document.createElement('button')
  btn.textContent = `Button ${i}`
  btn.classList.add('button', 'default-button')
  document.body.appendChild(btn)
}

＆＃13;

.button {
  background-color: blue;
  color: white;
  font-weight: bold;
}
.button:active, .button:focus {
  background-color: red;
}

＆＃13;

Answer 2

Modern browsers support the classList API now.

要使用classList API，请尝试在代码中添加以下内容：

var buttons = document.getElementsByClassName('button')

Array.prototype.forEach.call(buttons, function (button) {
  button.addEventListener('click', function (event) {
    button.classList.toggle('button-active')
  })
})

如果您只想打开活动状态，请将classList的toggle方法切换为add。 Read more on classList

代码示例细分：

首先，我选择所有.button元素并将其存储在NodeList数据类型中。然后我调用数组的forEach函数（另一种方法是[].forEach.call()，但每次运行时都会创建新的Array实例。我为click事件添加了一个事件监听器，我在其上切换一个新的类名。

对于直接的CSS操作，您可以使用button.style.color = 'red' - 但我不鼓励您采用这种方法来保持代码的可维护性。

Phil的注释（在对此答案的评论中）：您可以使用NodeList.prototype.forEach()将该行缩短为buttons.forEach(function (button) {。请记住，Internet Explorer不支持此功能。

Answer 3

没有JavaScript的CSS替代方案：

input[type=checkbox] { display: none; }
input[type=checkbox] + label { background-color: cyan; }
input[type=checkbox]:checked + label { background-color: red; }

<input type=checkbox id=t1><label for=t1> Toggle 1 </label><br>
<input type=checkbox id=t2><label for=t2> Toggle 2 </label><br>
<input type=checkbox id=t3><label for=t3> Toggle 3 </label><br>
<input type=checkbox id=t4><label for=t4> Toggle 4 </label><br>
<input type=checkbox id=t5><label for=t5> Toggle 5 </label><br>

Answer 4

您可以使用button.onclick = function(){ // do things here. }; 我已将代码包含在下面的代码段中。祝你好运。

var button;
createButtons();

function createButtons() {
  for (i = 0; i < 20; i++) {
    //creates a new button
    button = document.createElement('Button');

    //sets correct button number and button text
    var index = i + 1;
    var text = document.createTextNode('Button ' + index);
    button.appendChild(text);
    button.className += "button";
    button.className += " default-button";

    // --------------------------------------------------------
    // on click check if it contains the class for the color 
    // and toggle it on or off.
    button.onclick = function() {
      if (this.classList.contains("enableColor")) {
        this.classList.remove('enableColor');
      } else {
        this.classList.add("enableColor");
      }
    }
    // --------------------------------------------------------
    document.body.appendChild(button);
  }
}

.enableColor {
  background: red;
  color: white;
}

Answer 5

.focus()，但出于安全考虑，大多数浏览器实际上会阻止按钮点击类型行为。您可以执行的操作是设置按钮元素disabled = true属性，然后当您获得正在寻找的任何操作时，将该属性切换为disabled = false。

以下是您可以调整的代码段：

// enables submit button iif inputs meet validation contraints
function attachKeyupListenerToInputElements(){
    var inputs = doc.querySelectorAll('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("keyup", keyupHandler);
    }

    function keyupHandler() {
        if(this.value === ''){
            this.setCustomValidity('Required Field');
        } else {
            this.setCustomValidity('');
        }
        //for dialog inputs
        if(doc.querySelector(".mdc-dialog").classList.contains("mdc-dialog--open")){
            //dialog is open
            var thisSection  = this.parentElement.parentElement;
            var theseInputs = thisSection.querySelectorAll("input");
            var inputsFull = true;
            for (var i = 0; i < theseInputs.length; i++) {
                if(!theseInputs[i].checkValidity()){
                    inputsFull = false;
                }
            }
            if(inputsFull){
                doc.getElementById("dialog-accept-button").disabled = false;
            }
        }
    }
}

如何使用vanilla JS将按钮切换到活动状态？

5 个答案: