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);

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

此外，您正在通过两个参数调用$()，方法是不将它们之间的逗号包括在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}`);

不能在jquery函数中使用变量

1 个答案: