我正在尝试做一堆切换静音按钮。为了防止自己编写一堆函数,所有的功能都是一样的,我使用参数,我认为这就是代码混乱的地方。据我所知,如果我不使用参数,这应该是工作的。
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我相信有一个更整洁的方式来做我想做的事情,但我有点时间紧迫,不知道如何还)
2条答案
按热度按时间72qzrwbm1#
您可以将
isMuted
,monster
和audio
变量移动到DOM的属性中。因此按钮将保持其状态(开/关),以及相应怪物和音频的名称。创建怪物和音频的Map,属性名称对应变量。然后调用
setButtonAttributes
将音频和怪物的名称设置为按钮属性。重要的是,在
buttons
数组中保存DOM对象,您可以使用document.getElementById("BUTTON_ID")
,document.getElementsByTagName("button)
等方法获取它们。57hvy0tb2#
这里有一个方法来填充你的数组与正确的值(所有=真在开始)为您的布尔数组,在怪物数组的引用...
最后一个函数
function resetToTrue(index)
更新布尔数组,并避免有多个怪物未静音。注意:如果你不想看到你的按钮上的日志,当你运行代码片段时点击“完整页面”,否则它们将无法点击!
祝你今天愉快
如果多个怪物可能被“取消静音”,只需在函数
resetToTrue()
中注解这些行,如下所示: