如何组合多个onclick events/elements

Question

我有这个有多个按钮的切换功能。

var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');

var toggleState = function (elem, one, two) {
var elem = document.querySelector(elem);
elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); //ternary operator
};

button1.onclick = function (e) {
toggleState('#div1', 'open', 'closed');
e.preventDefault();
};

button2.onclick = function (e) {
toggleState('#div2', 'open', 'closed');
e.preventDefault();
};

button3.onclick = function (e) {
toggleState('#div3', 'open', 'closed');
e.preventDefault();
};

我试过 querySelectorAll 来组合变量，但它不起作用。我想我知道为什么。但我想不出更雄辩地编写脚本的方法。（雄辩地刮擦。可敬是一个更好的词）

如何组合变量和onclicks，使代码不那么冗余？

Answer 1

考虑类似于下面的解决方案。您可以循环处理每个元素，而不是为每个元素复制事件处理程序。

如果元素 ID 一致，您可以通过仅指定切换次数并动态生成 ID 来使其更简洁。

var toggles = {
    '#button1': '#div1',
    '#button2': '#div2',
    '#button3': '#div3'
};

Object.keys(toggles).forEach(function(toggle) {
    document.querySelector(toggle).onclick = function (e) {
        toggleState(toggles[toggle], 'open', 'closed');
        e.preventDefault();
    };
});

function toggleState(elem, one, two) {
    var elem = document.querySelector(elem);
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

Answer 2

这是一种解决方案：

您需要获取 button 个元素并为它们触发 onclick 事件。

您可以使用循环来代替每个按钮触发 onclick 事件处理程序。

阅读更多关于 bind function

var buttons=document.getElementsByTagName('button');
var toggleState = function (elem, one, two) {
    var elem = document.querySelector(elem);
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); //ternary operator
};
for(var i=0;i<buttons.length;i++){
     var button=document.querySelector('#button'+(i+1));
     button.onclick=(function(index){;
        toggleState('#div'+index,'open','closed');
     }).bind(this,i+1);     
}

如何组合多个onclick events/elements

How to combine multiple onclick events/elements

javascript

variables

onclick

toggle