javascript 变量在 if else 语句中

Question

我的音乐播放器中有一个自定义音量栏和静音按钮。静音非常简单，但我想在第二次单击按钮时返回以前的音量。

示例：假设当前音量为50%。单击静音按钮会将其更改为0.再次单击它应该会让它恢复到50%。

这是我尝试的方式：

var music = document.getElementById('music');
var volumehead = document.getElementById('volume-head');
var volumebar = document.getElementById('volume-bar');
var mute = document.getElementById('mute');
mute.addEventListener("click", muteSound);
function muteSound(){
if(mute.classList.contains('not-muted')){
// Save current values before changing them
var lastHead = volumehead.style.marginLeft;
var lastVolume = music.volume;
// Change classname for appearance and next click
mute.className = "muted";
// Change values to 0
volumehead.style.marginLeft = "0px";
music.volume = 0;
} else {
// Change classname for appearance and next click
mute.className = "not-muted";
// Use saved values
volumehead.style.marginLeft = lastHead;
music.volume = lastVolume;
}
}

保持处理程序位置和卷的 2 个variables在if-statement内被赋予一个值，这意味着它们在else-statement中没有一个值。

在语句之外声明它们意味着这些值将被0"覆盖"。

有没有办法保存这些值并在下次单击按钮时使用它们？

---

编辑(解决方案(：if-statement分配给variables的值，只有在function之外声明variables时，else-statement才能使用。

Answer 1

var music = document.getElementById('music');
var volumehead = document.getElementById('volume-head');
var volumebar = document.getElementById('volume-bar');
var mute = document.getElementById('mute');
var lastHead, lastVolume;
mute.addEventListener("click", muteSound);
function muteSound() {
if (mute.classList.contains('not-muted')) {
// Save current values before changing them
lastHead = volumehead.style.marginLeft;
lastVolume = music.volume;
// Change classname for appearance and next click
mute.className = "muted";
// Change values to 0
volumehead.style.marginLeft = "0px";
music.volume = 0;
} else {
// Change classname for appearance and next click
mute.className = "not-muted";
// Use saved values
volumehead.style.marginLeft = lastHead;
music.volume = lastVolume;
}
}

Answer 2

mute.addEventListener("click", muteSound);
var lastHead = "10px";
var lastVolume = 10;
function muteSound(){
if(mute.classList.contains('not-muted')){
// Save current values before changing them
lastHead = volumehead.style.marginLeft;
lastVolume = music.volume;
// Change classname for appearance and next click
mute.className = "muted";
// Change values to 0
volumehead.style.marginLeft = "0px";
music.volume = 0;
} else {
// Change classname for appearance and next click
mute.className = "not-muted";
// Use saved values
volumehead.style.marginLeft = lastHead;
music.volume = lastVolume;
}
}

Answer 3

您可以使用 IIFE(立即调用的函数表达式(在lastHead和lastVolume上闭包;

var muteSound = function () {
var lastHead, lastVolume;
return function () {
if (mute.classList.contains('not-muted')) {
// Save current values before changing them
lastHead = volumehead.style.marginLeft;
lastVolume = music.volume;
// Change classname for appearance and next click
mute.className = "muted";
// Change values to 0
volumehead.style.marginLeft = "0px";
music.volume = 0;
} else {
// Change classname for appearance and next click
mute.className = "not-muted";
// Use saved values
volumehead.style.marginLeft = lastHead;
music.volume = lastVolume;
}
};
}();
mute.addEventListener("click", muteSound);

Answer 4

在循环之外设置一个全局变量，并在音量设置为 0 之前将其分配给音量。然后在您的 else 语句中引用该变量！