не может использовать переменные в функции jquery - PullRequest
Новая
       10

не может использовать переменные в функции jquery

0 голосов
/ 10 сентября 2018

У меня есть очень простой скрипт 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 голосов
/ 10 сентября 2018

Поскольку вы не добавляете переменные друг к другу, это должно создать 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}`);
...