Javascript Can'；t切换音频/字体图标

我对JS/jQuery还很陌生，如果我犯了一个非常愚蠢的错误，请原谅我！：）

这是我的密码。我正在将其作为文件加载到当前页面（通过

）

我的导航栏中有一个可单击的图标：

<li><a class="navbar-brand" style="color: white; text-decoration: none;" onclick="BackgroundTrack(false)"><i id="playpause_background" class="fa"></i></a></li>

---

有一些事情需要改变

首先，点击被分配给图标，但不是按钮
另一件事是，从第一次单击开始，根据本地存储检查music参数的状态。这就是为什么你不能改变它
最后一点，您是否检查了存储，但为什么不检查本地存储
我已经用jQuery创建了按钮单击：

$("#btn").click(function(){
  musicState = !musicState;
    backgroundTrack(musicState);
});

按钮id：

<button id="btn"><i id="playpause_background" class="fa"></i></button>

功能：

function backgroundTrack(el) {
 var bgMusic = localStorage.getItem("bgMusic");
  if(localStorage){
    if (el === false) {
      playpauseButton.removeClass("fa-pause");
      playpauseButton.addClass("fa-play");
      backgroundTrackObj.pause();
      if (!el) {
        localStorage.setItem("bgMusic", "false");
      }
    } else if ( (el === true) || (bgMusic === null) ){
      playpauseButton.removeClass("fa-play");
      playpauseButton.addClass("fa-pause");
      backgroundTrackObj.play();
      if (!el || bgMusic === null) {
        localStorage.setItem("bgMusic", "true");
      }
    }
   } else {
      backgroundTrackObj.play();
   }
}

如果有帮助，请通知我

我更新了您的背景跟踪功能，如下所示。问题是，您需要区分使用本地存储和按钮是否正在播放。它们可以具有相同的值，但并非始终具有相同的值。这就是编写函数有点棘手的原因。您可以得到的最好结果是，在启动页面时，在最开始的时候单击两次暂停按钮，即使它不会跟踪存储

function BackgroundTrack(nochange) {
    if (typeof(Storage) === "undefined") {
        return backgroundTrackObj.play();
    }

    var bgMusic = localStorage.getItem("bgMusic"), update;
    var isPlay = nochange ? bgMusic === "true" : playpauseButton.hasClass("fa-play");

    if(isPlay){ //toggle
        playpauseButton.removeClass("fa-play");
        playpauseButton.addClass("fa-pause");
        backgroundTrackObj.play();
        update = "true";
    }else{
        playpauseButton.removeClass("fa-pause");
        playpauseButton.addClass("fa-play");
        backgroundTrackObj.pause();
        update = "false";
    }

    if (!nochange) {
        localStorage.setItem("bgMusic", update);
    }
}


var backgroundTrackObj=document.createElement（“音频”）；
backgroundTrackObj.src=“//tjone270.org/quakelive/2-24%20The%20firey%20Stronghold.mp3”；
backgroundTrackObj.volume=0.1；
var playpauseButton=$（“#playpause_background”）；
功能背景跟踪（无更改）{
if（类型（存储）=“未定义”）{
返回backgroundTrackObj.play（）；
}
var bgMusic=localStorage.getItem（“bgMusic”），更新；
var isPlay=nochange？bgMusic==“true”：playbausebutton.hasglass（“fa play”）；
如果（显示）{//切换
playbausebutton.removeClass（“faplay”）；
playpauseButton.addClass（“fa暂停”）；
backgroundTrackObj.play（）；
update=“true”；
}否则{
playpauseButton.removeClass（“fa暂停”）；
playpauseButton.addClass（“fa播放”）；
backgroundTrackObj.pause（）；
update=“false”；
}
如果（！nochange）{
setItem（“bgMusic”，更新）；
}
}
背景轨迹（真实）

在
jsfiddle
或其他代码片段中提供一个实例。由于它在控制台中运行良好，我认为您的if'if（typeof（Storage）！=“undefined”有问题{.我建议您删除函数中除添加/删除类逻辑之外的所有内容，并逐段添加功能。x@Animus我也这么想，但这不可能，因为
bgMusic
键是在本地存储中设置的，这意味着执行将继续进行到该点之外。@ThomasJones很抱歉没有回答f或者太长。这就是我的意思。另外，最好使用cdn：
function backgroundTrack(el) {
 var bgMusic = localStorage.getItem("bgMusic");
  if(localStorage){
    if (el === false) {
      playpauseButton.removeClass("fa-pause");
      playpauseButton.addClass("fa-play");
      backgroundTrackObj.pause();
      if (!el) {
        localStorage.setItem("bgMusic", "false");
      }
    } else if ( (el === true) || (bgMusic === null) ){
      playpauseButton.removeClass("fa-play");
      playpauseButton.addClass("fa-pause");
      backgroundTrackObj.play();
      if (!el || bgMusic === null) {
        localStorage.setItem("bgMusic", "true");
      }
    }
   } else {
      backgroundTrackObj.play();
   }
}

function BackgroundTrack(nochange) {
    if (typeof(Storage) === "undefined") {
        return backgroundTrackObj.play();
    }

    var bgMusic = localStorage.getItem("bgMusic"), update;
    var isPlay = nochange ? bgMusic === "true" : playpauseButton.hasClass("fa-play");

    if(isPlay){ //toggle
        playpauseButton.removeClass("fa-play");
        playpauseButton.addClass("fa-pause");
        backgroundTrackObj.play();
        update = "true";
    }else{
        playpauseButton.removeClass("fa-pause");
        playpauseButton.addClass("fa-play");
        backgroundTrackObj.pause();
        update = "false";
    }

    if (!nochange) {
        localStorage.setItem("bgMusic", update);
    }
}