时间戳

首页 > 解决方案 > 缩短具有不同 id 的重复动作

javascript - 缩短具有不同 id 的重复动作

问题描述

我正在尝试编写一个脚本，该脚本在按下多个 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;
    }
}

标签： javascriptoptimization

解决方案

为所有按钮创建一个函数并使用循环添加它们。你可以用一个类来定位它们。片段如下：

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>

推荐阅读