UIkit 3 的过滤器组件：使用 URL 哈希设置活动过滤器 - 无法使用 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实现这一目标的明确示例(这是关于UIkit 2的(。对于像我这样的菜鸟来说，文档似乎不清楚，因为不清楚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 的属性'子'"错误。

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

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

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

Answer 2

实现此目的的最简单方法是检查 url 中的哈希值，然后找到过滤内容的 href 标签。然后只需以编程方式单击它。
复杂(且更合适(的方法是像在代码中一样触发更改，但由于默认过滤器应用于文档加载，您需要确保在 UIKit 的过滤器之后调用脚本的过滤器。

window.addEventListener("load", function(event) {
//hash = document.location.hash;
//console.log("Hash: " + hash);
//Let's assume the document.location.hash returns #white
hash = '#white';
if (hash !== "") {
//get the color subnav button
color = document.querySelector('a[href="'+hash+'"]');
//trigger the click event
color.click();
}
});

body {
background-color: #eee;
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit-icons.min.js"></script>
<div data-uk-filter=".js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control><a href="#">All</a></li>
<li uk-filter-control="[data-color='white']"><a href="#white">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#blue">Blue</a></li>
<li uk-filter-control="[data-color='black']"><a href="#black">Black</a></li>
</ul>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
</ul>
</div>