1

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

这些按钮使用类属性来删除列表项组。在我的实际应用程序中，我需要在大约 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>
4

1 回答 1

1

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

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

或者

$('li-element').addClass("ui-screen-hidden");
于 2013-03-01T15:23:47.557 回答