Question

我通过按钮或复选框过滤uk过滤器。

我了解可以在包含.js-filter的中创建一个过滤器。但我想在div外部创建一个复选框。那么如何调用或设置可能的选择。

这就是我所拥有的。

<div uk-filter=".js-filter" data-id="page#4" id="page#4" class="uk-margin">    
<ul class="el-nav uk-margin uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="">
        <a href="">All</a>
        </li>

            <li uk-filter-control="[data-tag~='Anual']">
        <a href="#">Anual</a>
    </li>
        <li uk-filter-control="[data-tag~='Temporada']">
        <a href="#">Temporada</a>
    </li>  
</ul>
        <div class="js-filter uk-child-width-1-1 uk-child-width-1-2@m uk-grid-match uk-grid" uk-grid=""> 
        <div data-tag="Anual Temporada" class="uk-first-column">
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">
                <h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom"> 
<a href="" class="uk-link-reset">Triplex  MI 47</a> 
</h3>        
<a href="">
</a>        
 <div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p></div>                
</div></div>   
<div>
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">  
<h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom">
<a href="" class="uk-link-reset">Botafoch MI35</a>                    </h3>        
 <a href="">
 </a>        
<div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p>
<p style="text-align: justify;">info</p></div>        
</div></div>
</div>

</div>

这是我从onclick调用的功能

function myFunction() {
        var filter = document.querySelector('.js-filter');
        var filterBar= document.querySelector('#page#4');
        var activeFilter= document.querySelector('div [data-tag:'Anual']');
        UIkit.filter( filterBar, {
            target: filter,
            selActive: activeFilter,
        });

}

在另一篇文章中，我看到他们在页面加载并设置哈希值时设置了过滤器的选择，我喜欢通过按钮来执行相同操作。这是另一篇文章UIkit 3's Filter component: Set active filter with URL hash - unable to change active filter with JS

UIkit 3的过滤器组件

0 个答案: