if else 语句中的 Javascript 变量答案

【问题标题】：Javascript variables inside if else statementif else 语句中的 Javascript 变量
【发布时间】：2018-01-09 21:06:16
【问题描述】：

我的音乐播放器中有一个自定义音量条和静音按钮。静音很简单，但是我想在第二次点击按钮时返回之前的音量。

示例：假设当前音量为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 的值只能由else-statement 使用，前提是variables 声明在function 之外。

【问题讨论】：

在 if 语句中声明了处理程序位置和音量的 2 个变量，这意味着它们在 else 语句中不可访问 - 这是使用var 时不正确，它们被提升到函数的顶部。当使用let 或const 时，变量仅作用于语句块。无论如何，解决您的问题的方法是在函数之外声明变量
您需要将音量保存在函数muteSound 之外的变量中，即所有其他volumebar 变量等所在的位置。从概念上讲：您应该将事件处理程序附加到音量条，每次移动时都会更新 volume 变量；所以volume 总是包含当前选择的卷。当点击mute 时，您将音量静音并呈现您的 UI 以指示静音音量； 您不会更改volume 的值。取消静音时，您会恢复音量并再次更新 UI。
@MikaelLennholm 当我控制台记录 if 和 else 语句中的变量时，else 语句中的变量返回 undefined。
@PeterPrakker 是的，它们永远不会被分配一个值，这发生在 if 块中。但是由于提升，它们被声明了，否则它不会记录undefined，它会抛出一个ReferenceError 说lastHead is not defined。您可以通过将var 更改为let 来亲自查看差异。
@MikaelLennholm 啊，你是对的。我在问题中编辑了我的陈述。谢谢你的解释！

标签： javascript variables if-statement scope global-variables

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 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);

【讨论】：

@deceze 会让函数“静态”解决这个问题吗？

【解决方案3】：

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;
}
}

【讨论】：

【解决方案4】：

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;
    }
}

【讨论】：

虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将改善答案的长期价值。