Question

为了使过滤器链接具有已过滤的工具，我试图根据URL（哈希）中的数据属性在“链接”上添加类。我没有使用输入[复选框]作为过滤器列表/术语。

该网站位于Wordpress上，并且我使用了这个很棒的插件作为过滤器：https://github.com/Robbertdk/wordpress-ajax-filter-posts

基于：https://stackoverflow.com/a/36796926/8544865

的JS代码

过滤条件示例：

<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”。网址将类似于：http://website/our-instruments/#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 /这是我遇到麻烦的地方。我只想在与数据项值相对应的元素上添加类。我可以将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用于过滤过程，单击事件监听器）

这里是整个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");
        }); 
    }
});

我希望我的问题是可以理解的。

谢谢！

根据URL哈希在li元素（过滤器）上添加类

0 个答案: