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中没有。{ / p>

在语句之外声明它们意味着值将被覆盖＆＃34; 0。

有没有办法保存这些值并将其用于下一次点击按钮？

编辑（解决方案）： 分配给if-statement的{{1}}的值只能由variables使用，如果else-statement被声明为在之外的variables function 1}}。

Answer 1

你可以使用一个IIFE（immediately-invoked function expression），其封闭超过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 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

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 4

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

if else语句里面的Javascript变量

4 个答案: