在后续函数中保留变量的值

Question

我有这段代码，它获取点击的超链接的类，并在该超链接中切换特定 div 的 播放 和 暂停图标。我的 Javascript 逻辑有问题：

var mediaClicked_class = "";
var previousMediaClicked_class = "";
var pauseIconStatus = null;

// Get class of clicked hyperlink
function mediaClick_class(clicked_class) {
  alert(pauseIconStatus + " : Initial pause Icon status");
  mediaClicked_class = clicked_class; // when i click map hyperlink, pass respective class into variable

  preEmptivePlay(mediaClicked_class, pauseIconStatus);
}

function preEmptivePlay(mediaClicked_class, pauseIconStatus) {
  if (pauseIconStatus == null) { //global var. init.
    //toggle class of currently clicked div.icon
    $("div.icon_" + mediaClicked_class).toggleClass("playicon pauseicon");

    var pauseIconAvailability = $("div.icon_" + mediaClicked_class).hasClass("pauseicon");

    if (pauseIconAvailability) { //true - playing
      pauseIconStatus = 1;; //pause icon is active i.e. song is playing
      previousMediaClicked_class = mediaClicked_class; //store current class to be called later
      alert(pauseIconStatus + " : Current icon status");
    } else { //false - not playing
      pauseIconStatus = 0;; //pause icon is inactive i.e. song is not playing
      previousMediaClicked_class = mediaClicked_class;
      alert(pauseIconStatus + " : Current icon status");

    }
  }
}

问题是当我点击超链接时，这个函数被调用，第四行每次都将pauseIconStatus初始化为null，而不是在后续调用中保留可能的值0。

我在哪里可以声明这个变量以初始化为 null，然后在后续调用中取消重新初始化？

Answer 1

这里的问题是您将pauseIconStatus 作为参数传递给函数preEmptivePlay，这意味着您所做的更改在该函数之外是看不到的。

您可以通过添加以下行来明确地看到这种情况：

alert(pauseIconStatus + " : After preEmptivePlay pause Icon status");

在您调用preEmptivePlay 之后立即进入mediaClick_class，您将看到pauseIconStatus 的值再次为空，因为您在preEmptivePlay 中所做的更改永远不会离开函数。

如果您更改 mediaClick_class 使其改为：

pauseIconStatus = preEmptivePlay(mediaClicked_class, pauseIconStatus);

同时更改preEmptivePlay，使最后一行（添加）为：

return pauseIconStatus;

您应该看到pauseIconStatus 在第一次点击之后将不再是null。

也可能是，根据mediaClick_class的调用方式，还需要在点击处理程序的末尾添加return false;，否则点击超链接会导致页面重新加载，例如如果您的页面名为 default.html 并且链接如下所示：

<a href="default.html" id="myLink"><div id="icon_thing">Text</div></a>

click 事件的连接需要如下所示：

$("#myLink").on('click', function ()
{
    mediaClick_class('thing');

    return false;
});