Question

我正在尝试为我的用户提供2种过滤列表的方法;通过数据过滤器和几个按钮。

按钮使用类属性删除列表项组。在我的实际应用中，我需要切换大约8个类别;或者全部展示。

所以我编写了例程'filterCategories'，其中.hide（）所有项目，然后.show（）只是我想要显示的类别。这很好用。（我不能使用嵌套列表，因为项目按特定顺序排列 - 不按类别顺序排列）

但是，在我.hide（）和.show（）之后，数据过滤器不再适用于隐藏的项目。 .hide（）似乎从listview-filter中删除了项目。

我尝试了一个listview（'refresh'），但没有帮助。

还有其他方法吗？

谢谢，杰夫

（缩减下面的版本...点击“删除10s”，然后在搜索栏中输入22。只显示“第22项”。）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 </head>

<script type="text/javascript" >
function filterCategories(showme){
    if (showme == 'all') {
        $('li.all').show(); 
    } else {
        $('li.all').hide();
        $('li.'+showme).show();
    }
    $('#itemResults').listview('refresh');
}

$( '#Page1' ).live( 'pageinit',function(event){
  });

</script>

  <body>
    <div data-role="page" id="Page1">
    <div data-role="content">
            <ul data-role="listview" id="itemResults" data-filter="true">
                <li class="" onclick="filterCategories( '20s' );"><a 
href="#">Remove 10s</a></li>    
                <li class="" onclick="filterCategories( '10s' );"><a 
href="#">Remove 20s</a></li>    
                <li class="all 10s" ><a href="#">Item 11</a></li>   
            <li class="all 20s" ><a href="#">Item 22</a></li>   
            <li class="all 10s" ><a href="#">Item 13</a></li>   
                <li class="all 20s" ><a href="#">Item 24</a></li>   
                <li class="all 10s" ><a href="#">Item 15</a></li>   
                <li class="all 20s" ><a href="#">Item 26</a></li>   
            </ul>
    </div>
    </div>
  </body>
</html>

Answer 1

我遇到了完全相同的问题，经过多次故障排除后我找到了解决方案：而不是使用$（'li-element'）。hide（）或.show（），你必须添加或删除类“ui-screen-hidden”。

$('li-element').removeClass("ui-screen-hidden");

OR

$('li-element').addClass("ui-screen-hidden");

jquery mobile：隐藏列表项后数据过滤器不起作用

1 个答案: