缩短不同id的重复动作

Question

我正试图写一个脚本，做同样的事情对多个id的按钮按下。有什么办法能缩短这个时间吗?

function start(){
var b1,b2,b3,b4 = true;
document.getElementById('btn1').onclick=btn1;
document.getElementById('btn2').onclick=btn2;
document.getElementById('btn3').onclick=btn3;
document.getElementById('btn4').onclick=btn4;
}
function btn1(b1) {
if(b1){
document.getElementById('btn1').style.opacity=".25";
b1=false;
}
}
function btn2(b2) {
if(b2){
document.getElementById('btn2').style.opacity=".25";
b2=false;
}
}
function btn3(b3) {
if(b3){
document.getElementById('btn3').style.opacity=".25";
b3=false;
}
}
function btn4(b4) {
if(b4){
document.getElementById('btn4').style.opacity=".25";
b4=false;
}
}

Answer 1

为所有按钮创建一个函数，并使用循环添加它们。你可以用一个类来瞄准他们。代码片段如下:

function start(){
const buttons = document.querySelectorAll('.button');
for (i = 0; i < buttons.length; i++) {
buttons[i].onclick = buttonFunction;
}
}
start();
function buttonFunction(e) {
e.currentTarget.style.opacity=".25";
}

<button class="button" id="btn1">1</button>
<button class="button" id="btn2">2</button>
<button class="button" id="btn3">3</button>
<button class="button" id="btn4">4</button>