javascript 使用参数切换静音按钮

fcg9iug3  于 2023-04-19  发布在  Java
关注(0)|答案(2)|浏览(123)

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

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。根据bool的状态执行不同的代码。我必须为一堆按钮做这件事,所以我只写了一个函数,它根据你按下的按钮接受不同的bool。
(Also我相信有一个更整洁的方式来做我想做的事情,但我有点时间紧迫,不知道如何还)

72qzrwbm

72qzrwbm1#

您可以将isMutedmonsteraudio变量移动到DOM的属性中。因此按钮将保持其状态(开/关),以及相应怪物和音频的名称。
创建怪物和音频的Map,属性名称对应变量。然后调用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()
57hvy0tb

57hvy0tb2#

这里有一个方法来填充你的数组与正确的值(所有=真在开始)为您的布尔数组,在怪物数组的引用...
最后一个函数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>

如果多个怪物可能被“取消静音”,只需在函数resetToTrue()中注解这些行,如下所示:

/*
if(isMuted[j]==false){
    isMuted[j]=true;
    isMuted[index]=false;
}
*/

相关问题