我正在尝试将哈希值传递给 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 http://example.com/#white该事物仅显示白色项目(并且“白色”过滤器控件处于活动状态)。
我找不到任何关于如何使用 UIkit 3 实现此目的的明确示例(这是关于 UIkit 2 的 https://www.yootheme.com/support/question/92812). 对于像我这样的菜鸟来说,文档似乎不清楚 https://getuikit.com/docs/filter#component-options,因为尚不清楚什么target
and 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 的属性‘子级’”错误。
任何帮助,将不胜感激。 :)
<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,
});
}
});
我听得太晚了)但是试试这个代码。您需要首先传递过滤器组件而不是列表。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)