1

リストをフィルタリングする2つの方法をユーザーに提供しようとしています。データフィルターといくつかのボタンのいずれかによって。

ボタンはクラス属性を使用して、リストアイテムのグループを削除します。私の実際のアプリケーションでは、切り替える必要のあるカテゴリが約8つあります。またはそれらすべてを表示します。

そこで、すべてのアイテムを.hide（）し、次に表示したいカテゴリだけを.show（）するルーチン'filterCategories'を作成しました。これは正常に機能します。（アイテムはカテゴリ順にではなく、特定の順序で配置されているため、ネストされたリストを使用できません）

ただし、.hide（）および.show（）を実行すると、非表示にされたアイテムに対してデータフィルターが機能しなくなります。.hide（）は、listview-filterからアイテムを削除しているようです。

listview（'refresh'）を試しましたが、役に立ちません。

これを行う他の方法はありますか？

ありがとう、ジェフ

（以下のバージョンを切り取ります... [10秒削除]をクリックして、検索バーに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

まったく同じ問題が発生し、多くのトラブルシューティングを行った後、解決策を見つけました。$（'li-element'）。hide（）または.show（）を使用するのではなく、クラス「ui-screen-hidden」を追加または削除する必要があります。

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

また

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