不能在 jquery 函数中使用变量

Question

我有一个非常简单的 jquery 脚本，基本上可以在两个类之间切换两个元素。不完全相关，但目标是让关闭的 canvas 滑入到位。一切正常，但我无法切换 off-canvas 面板，因为显然我没有正确使用变量名。我尝试了所有选项，但我不知道自己做错了什么。

$(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 期望的是什么。所有其他主题都说仅使用变量名就足够了，但这显然行不通。

有什么建议吗？谢谢！

Answer 1

因为您没有将变量相互附加，这应该会产生一个 SyntaxError: Unexpected identifier，您可以像这样添加变量和它们之间的 space：

.toggleClass(filterPanel + " " + filterPanelOpen);

在它们之间添加一个space。

此外，您使用两个参数调用 $()，方法是在其中一个字符串表达式中不包括它们之间的逗号：

$("." + 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);
  });
});

如果您可以在您的环境中使用模板文字（您只针对现代浏览器，或使用转译），那么如果您使用一个（至少用于选择器，也可能用于 class 列表在 toggleClass):

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

不能在 jquery 函数中使用变量

can't use variables in jquery function

variables

jquery

toggle