不能在jquery函数中使用变量

时间:2018-09-10 13:11:34

标签: jquery variables toggle

我有一个非常简单的jquery脚本,该脚本基本上在两个类之间切换两个元素。并非完全相关,但目标是将脱画布的幻灯片放到位。一切正常,但是我无法切换画布面板,因为显然我没有正确使用变量名。我尝试了所有选项,但我不知道自己在做什么错。

$(document).ready(function() {
  $(".toggleFilter").click(function() {
    var filterPanel = $(this).attr("href").replace("#", "");
    console.log(filterPanel);
    var filterPanelOpen = filterPanel + "Open";
    console.log(filterPanelOpen);
    $(".container, .containerLeft").toggleClass("container containerLeft");
    $("." + filterPanel, "." + filterPanelOpen).toggleClass(filterPanel filterPanelOpen);
  });
});

切换容器的行绝对正常,变量已记录在控制台中,因此我知道它们是正确的。由于某种原因,最后一行不能满足我的要求。那行为什么不等于?

$("filterPanel, filterPanelOpen").toggleClass("filterPanel filterPanelOpen");

看来,由于我使用变量,因此我需要使用不同的语法,但我无法弄清jquery的期望。所有其他主题都说仅使用变量名就足够了,但这显然行不通。

有什么建议吗? 谢谢!

1 个答案:

答案 0 :(得分:3)

由于您没有将变量彼此追加,因此应该产生一个SyntaxError: Unexpected identifier,因此您可以像这样添加变量和变量之间的空格:

.toggleClass(filterPanel + " " + filterPanelOpen);

在它们之间添加一个空格。

此外,您正在通过两个参数调用$(),方法是不将它们之间的逗号包括在String表达式之一中:

$("." + filterPanel + ", ." + filterPanelOpen)

更改两者,该功能应该起作用:

$(document).ready(function() {
  $(".toggleFilter").click(function() {
    var filterPanel = $(this).attr("href").replace("#", "");
    console.log(filterPanel);
    var filterPanelOpen = filterPanel + "Open";
    console.log(filterPanelOpen);
    $(".container, .containerLeft").toggleClass("container containerLeft");
    $("." + filterPanel+ ", ." + filterPanelOpen).toggleClass(filterPanel + " " + filterPanelOpen);
  });
});

如果您可以在环境中使用模板文字(您仅针对现代浏览器,或使用转译),则使用一个模板文字可能会更清楚(至少用于选择器,还可能用于其中的类列表) toggleClass):

$(`.${filterPanel}, .${filterPanelOpen}`).toggleClass(`${filterPanel} ${filterPanelOpen}`);