для того, чтобы иметь ссылку фильтра с уже отфильтрованными инструментами, я пытаюсь добавить классы в «ссылки» в зависимости от атрибутов данных в 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");
});
}
});
Я надеюсь, что моя проблема понятна.
Спасибо !
Задача ещё не решена.
Других решений пока нет …