javascript - UIkit 3 的 Filter 组件 : Set active filter with URL hash - unable to change active filter with JS

Question

我正在尝试将散列传递给 URL 以设置 UIkit 过滤器。

<div uk-filter="target:.js-filter">
    <ul>
        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="filter:[data-color='blue'];"><a href="#"></a></li>
        <li uk-filter-control="filter:[data-color='white'];"><a href="#"></a></li>
    </ul>
    <ul class="js-filter">
        <li data-color="blue"></li>
        <li data-color="white"></li>
    </ul>
</div>

例如，如果我转到 http://example.com/#white该事物仅显示白色项目(并且“白色”过滤器控件处于事件状态)。

我找不到任何关于如何使用 UIkit 3 ( This one is about UIkit 2 ) 实现此目的的明确示例。 Documentation seems unclear for a noob like me ，因为不清楚 target 和 selActive 选项指的是什么。但是，我正在尝试以下内容:

<script>
document.addEventListener("DOMContentLoaded", function(event){
    hash = document.location.hash;
    console.log("Hash: " + hash);

    if ( hash !== "" ) {
        var filter = document.querySelector('.js-filter');

        UIkit.filter( filter, {
            target: 'li [data-color:' + hash + ']',
            selActive: true,
        });
    }
});
</script>

但这会引发“未捕获的类型错误:无法读取 null 的属性‘children’”错误。

如有任何帮助，我们将不胜感激。 :)

Answer 1

<div uk-filter="target:.js-filter">
<ul id="filter-bar">
    <li class="uk-active" uk-filter-control><a href="#">All</a></li>
    <li uk-filter-control="filter:[data-color='blue'];"><a href="#"></a></li>
    <li uk-filter-control="filter:[data-color='white'];"><a href="#"></a></li>
</ul>
<ul class="js-filter">
    <li data-color="blue"></li>
    <li data-color="white"></li>
</ul>

      document.addEventListener("DOMContentLoaded", function(event){
        hash = document.location.hash;
        console.log("Hash: " + hash);

        if ( hash !== "" ) {
            var filter = document.querySelector('.js-filter');
            var filterBar= document.querySelector('#filter-bar');
            var activeFilter= document.querySelector('li [data-color:' + hash + ']');
            UIkit.filter( filterBar, {
                target: filter,
                selActive: activeFilter,
            });
        }
    });

我听得太晚了)但是试试这段代码。您需要首先传递过滤器组件而不是列表。