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事件/元素

2 个答案: