如果else语句中的Javascript变量

问题描述：

我的音乐播放器中有一个自定义音量栏和静音按钮。静音非常简单，但是我想在第二次点击按钮时返回前一个音量。如果else语句中的Javascript变量

例如：比方说，目前的数量是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个变量给出if-statement内的值，这意味着他们没有一个在else-statement。

在声明之外声明它们意味着值将被0“覆盖”。

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

编辑： 的if-statement分配给variables的值，只能由else-statement使用，如果variables被宣布的function之外。

*持有的处理器和体积的位置的2个变量if语句内声明的，也就是说他们不是在else语句访问* - 这是不是在使用'var'时为true，它们被悬挂在函数的顶部。当使用'let'或'const'时，一个变量的作用域只限于一个语句块。无论如何，解决您的问题的方法是在函数外部声明变量 –

您需要将音量保存在函数'muteSound'之外的变量中，即将所有其他'volumebar'变量等都存储在变量之外。从概念上说：您应该将一个事件处理程序附加到每次移动时更新'volume'变量的音量栏;所以'volume'总是包含当前选择的音量。当单击“静音”时，您将音量静音并呈现您的用户界面以指示静音音量; **您不会更改'音量'的值。**取消静音时，您可以恢复音量并再次更新UI。 – deceze

@MikaelLennholm当我console.log变量都在if和else语句中时，else语句中的变量返回undefined。 – PeterPrakker

答

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

虽然此代码可能会回答问题，但提供有关_how_和/或_why_的其他上下文可以解决问题，从而提高答案的长期价值。 – JosefZ

答

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

答

您可以使用一个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会使'静态'功能解决这个问题？ – Jerry

答

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

如果else语句中的Javascript变量

相关推荐