Добавить класс для элемента li (фильтра) в зависимости от хеша URL

для того, чтобы иметь ссылку фильтра с уже отфильтрованными инструментами, я пытаюсь добавить классы в «ссылки» в зависимости от атрибутов данных в URL (хэш).
Я не использую ввод [флажок] для списка фильтра / терминов.

Сайт работает на WordPress, и я использую этот замечательный плагин для фильтра: https://github.com/Robbertdk/wordpress-ajax-filter-posts

JS код, основанный на: https://stackoverflow.com/a/36796926/8544865

Пример условий фильтрации:

<div class="ajax-posts__filterlist">
<ul>
<li><a href="" class="disabled" data-term="filter-term1"><span>Instrument 1</span></a></li>
<li><a href="" class="disabled" data-term="filter-term2"><span>Instrument 2</span></a></li>
<li><a href="" class="disabled" data-term="filter-term3"><span>Instrument 3</span></a></li>
<li><a href="" class="disabled" data-term="filter-term4"><span>Instrument 4</span></a></li>
<li><a href="" class="disabled" data-term="filter-term5"><span>Instrument 5</span></a></li>
</ul>
</div>

JQuery

1 / добавление data-term = «value» на URL. URL будет как: Http: // сайт / наши-инструменты / # term1 + term2 + term3 (если term1 / 2/3 проверены вручную):

var hash = $(".ajax-posts__filterlist ul a.chkd-el").map(function() {
return $(this).data("term");
}).toArray();
hash = hash.join("+");
location.hash = hash;

2 / вот та часть, где у меня проблемы. Я хочу добавить классы только на элементы, соответствующие значению data-term. Я могу поместить все значения из URL в данные, но я не могу использовать их для добавления классов в правильные элементы:

if (location.hash !== "") {
var hash = location.hash.substr(1).split("+");

hash.forEach(function(data) {
console.log(data); // return right strings term1, term2, etc...

$(".ajax-posts__filterlist ul a[data-term=" + data + "]").addClass("is-active enabled chkd-el"); // that line is not working
});
}

3 / Полагаю, мне понадобится триггер для имитации проверенного элемента (для процесса фильтрации используется ajax, щелкнув Event Listeners)

Вот весь код JS:

var $checkedEl = $(".ajax-posts__filterlist a");

$checkedEl.on("click", function() {
if ( $(this).hasClass("chkd-el") ) {
$(this).removeClass("chkd-el");
} else {
$(this).addClass("chkd-el");
}

var hash = $(".ajax-posts__filterlist ul a.chkd-el").map(function() {
return $(this).data("term");
}).toArray();
hash = hash.join("+");
location.hash = hash;

if (location.hash !== "") {
var hash = location.hash.substr(1).split("+");

hash.forEach(function(data) {
console.log(data);
$(".ajax-posts__filterlist ul a[data-term=" + data + "]").addClass("is-active enabled chkd-el");
});
}
});

Я надеюсь, что моя проблема понятна.

Спасибо !

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …