带参数的切换静音按钮

Question

我正在尝试制作一堆切换静音按钮。为了防止我自己编写一堆做同样事情的函数，我使用了参数，我认为这就是代码混乱的地方。据我所知，如果我不使用参数，这应该可以工作。

let isMuted1 = false,
    isMuted2 = false,
    isMuted3 = false,
    isMuted4 = false,
    isMuted5 = false,
    isMuted6 = false,
    isMuted7 = false;

muteButton1.addEventListener('click', () => {
    muteMonster(monster1, audio1, isMuted1);
})
muteButton2.addEventListener('click', () => {
    muteMonster(monster2, audio2, isMuted2);
})
muteButton3.addEventListener('click', () => {
    muteMonster(monster3, audio3, isMuted3);
})
muteButton4.addEventListener('click', () => {
    muteMonster(monster4, audio4, isMuted4);
})
muteButton5.addEventListener('click', () => {
    muteMonster(monster5, audio5, isMuted5);
})
muteButton6.addEventListener('click', () => {
    muteMonster(monster6, audio6, isMuted6);
})
muteButton7.addEventListener('click', () => {
    muteMonster(monster7, audio7, isMuted7);
})

function muteMonster(monster, audioElement, isMuted) {
    if (!isMuted) {
        isMuted = true;
        monster.style.opacity = "0.5";
        audioElement.muted = true;
    } else {
        isMuted = false;
        monster.style.opacity = "1";
        audioElement.muted = false;
    }
}

我尝试通过将 bool 轻弹到 false 来制作切换按钮，如果它是 true，如果它是 false 则弹到 true。根据布尔的状态执行不同的代码。我必须为一堆按钮做这个，所以我只写了一个函数，它根据你按下的按钮接收不同的布尔值。

（我也确信有一种更简洁的方法来做我想做的事情，但我时间有点紧，还不知道怎么做）

Answer 1

您可以将

isMuted

、

monster

和

audio

变量移动到DOM的属性中。所以按钮将保持其状态（开/关），以及相应怪物和音频的名称。

创建怪物和音频的地图，其中属性名称对应于变量。然后调用

setButtonAttributes

将音频和怪物的名称设置为按钮属性。

在

buttons

数组中保留DOM对象很重要，您可以使用

document.getElementById("BUTTON_ID")

，

document.getElementsByTagName("button)

等方法获取它们

let buttons = [...] // here enumerate all your buttons
let monsters = {
    monster1: monster1, 
    monster2: monster2,...
} // keep your monster variables in a map
let audios = {
} // audios' map similar to monsters' one

for(let button of buttons) {
    button.onclick = () => muteMonster(button)
}

function muteMonster(button) {
    let monster = monsters[button.getAttribute("monster")]
    let audioElement = audios[button.getAttribute("audio")]
    if (!button.getAttribute("isMuted")) {
        button.setAttribute("isMuted", true);
        monster.style.opacity = "0.5";
        audioElement .muted = true;
    } else {
        button.setAttribute("isMuted", false);
        monster.style.opacity = "1";
        audioElement.muted = false;
    }
}

setButtonAttributes() {
    let iter = 0;
    for(let button of buttons) {
        button.setAttribute("monster", `monster${iter++}`)
        button.setAttribute("audio", `audio${iter++}`)
    }
}

setButtonAttributes()

Answer 2

这是一种使用布尔数组的正确值（开始时全部 = true）填充数组的方法，怪物数组中的引用...

最后一个函数

function resetToTrue(index)

更新布尔数组并避免有多个怪物未被静音。

如果您不想在按钮上看到日志，请在运行代码段时单击“完整页面”，否则它们将无法单击！

        let nbElements = 7;
        let monsters=[];
        let buttons=[];
        let isMuted=[];
        window.addEventListener("DOMContentLoaded",createTables);
        function createTables(){
            for(var i = 0; i < nbElements; i++){
                monsters.push(document.getElementById("monster_" + (i+1)));
                buttons.push(document.getElementById("button_" + (i+1)));
                isMuted.push(true);
                monsters[i].textContent = "monster n°" + (i+1) + " muted = " + isMuted[i] + " audio_" + (i+1) + " = " + !isMuted[i];
                monsters[i].style.opacity = 0.5;
                buttons[i].addEventListener("click",buttonClickHandler);
            }
        }
        function buttonClickHandler(e){
            isMuted[this.value-1] = !isMuted[this.value-1];
            monsters[this.value-1].textContent = "monster n°" + this.value + " muted = " + isMuted[this.value-1] + " audio_" + this.value + " = " + !isMuted[this.value-1];
            
            resetToTrue([this.value-1])
        }
        function resetToTrue(index){
            for(var j = 0; j < nbElements; j++){
                if(isMuted[j]==false){
                    isMuted[j]=true;
                    isMuted[index]=false;
                }
                monsters[j].textContent = "monster n°" + (j+1) + " muted = " + isMuted[j] + " audio_" + (j+1) + " = " + !isMuted[j];
                if(isMuted[j]){
                    monsters[j].style.opacity = 0.5;
                }else{
                    monsters[j].style.opacity = 1;
                }
            }
            console.log("isMuted Array = " + isMuted);
        }

    <div id="monster_1">monster</div>
    <div id="monster_2">monster</div>
    <div id="monster_3">monster</div>
    <div id="monster_4">monster</div>
    <div id="monster_5">monster</div>
    <div id="monster_6">monster</div>
    <div id="monster_7">monster</div>
    <button id="button_1" name="button_1" value="1">button_1</button>
    <button id="button_2" name="button_2" value="2">button_2</button>
    <button id="button_3" name="button_3" value="3">button_3</button>
    <button id="button_4" name="button_4" value="4">button_4</button>
    <button id="button_5" name="button_5" value="5">button_5</button>
    <button id="button_6" name="button_6" value="6">button_6</button>
    <button id="button_7" name="button_6" value="7">button_7</button>