UIkit 3的过滤器组件:使用URL哈希设置活动过滤器-无法使用JS更改活动过滤器 [英] UIkit 3's Filter component: Set active filter with URL hash - unable to change active filter with JS

问题描述

我正在尝试将哈希传递给URL以设置UIkit过滤器.

I'm trying to pass a hash to an URL to set a UIkit filter.

<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 ，事物仅显示白色项目(并且白色"过滤器控件处于活动状态).

So, for example, if I go to http://example.com/#white the thing shows only the white items (and the "white" filter control is active).

我找不到关于如何使用UIkit 3实现此目标的明确示例(这一个关于UIkit 2 ). 对于像我这样的菜鸟，文档似乎不清楚，因为尚不清楚target和selActive选项正在引用.但是，我正在尝试以下操作:

I couldn't find any clear example about how to achieve this with UIkit 3 (This one is about UIkit 2). Documentation seems unclear for a noob like me, for it's unclear what target and selActive options are refering to. However, I'm trying with the following:

<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>

但这会引发未捕获的TypeError:无法读取null的属性'children'".

But this throws a "Uncaught TypeError: Cannot read property 'children' of null" error.

任何帮助将不胜感激. :)

Any help would be appreciated. :)

推荐答案

<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,
            });
        }
    });

我听到太迟了)，请尝试使用此代码.您需要先传递过滤器组件，而不是列表.

I'm hear too late) But try this code. You need to pass your filter component first not your list.

这篇关于UIkit 3的过滤器组件:使用URL哈希设置活动过滤器-无法使用JS更改活动过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！