不能在 jquery 函数中使用变量

Question

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

有什么建议吗？ 谢谢！

Answer 1

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

.toggleClass(filterPanel + " " + filterPanelOpen);

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

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

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