1

彼女は私のhtmlとjQueryです。フィルターdivの「ソート」「ボタン」を押すと、クラス名でアルファベット順にソートする機能が必要です。現在、他のすべてを非表示にする「緑」で他のすべてを非表示にすることができます。しかし、しかし、それらを並べ替える能力が必要です。

    <div id='filters'>
        <a href='#' id ="sort">Sort</a> 
        <a href='#' id='blue'>blue</a>
        <a href='#' id='green'>green</a>
        <a href='#' id='yellow'>yellow</a>
    </div

    <div id="box">
        <ul id="filter">
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul> 
    </div>

$('#filters a').click(function(e){ 
    e.preventDefault();  
    var filter = $(this).attr('id');  
        $('#box ul li').show();  
        $('#box ul li:not(.' + filter + ')').hide();  
});
4

1 に答える 1

0

これにより、リストが昇順にソートされます。

 <div id='filters'>
    <a href='#' id ="sort">Sort</a> 
    <a href='#' id='blue'>blue</a>
    <a href='#' id='green'>green</a>
    <a href='#' id='yellow'>yellow</a>
</div>

<div id="box">
    <ul id="filter">
        <li class="green">Green</li>
        <li class="blue">Blue</li>
        <li class="yellow">Yellow</li>
        <li class="blue">Blue</li>
        <li class="yellow">Yellow</li>
    </ul> 
</div>

$('#filters a').click(function(e){ 

  e.preventDefault();  

  var filter = $(this).attr('id'); 

  if (filter == "sort") {

    $('#box ul li').sort(asc_sort).appendTo('#filter');
  }
  else {

    $('#box ul li').show();  
    $('#box ul li:not(.' + filter + ')').hide(); 

  }
});

function asc_sort(a, b) { 
    return ($(b).text()) < ($(a).text());
}

JSFiddle

完全な開示:この質問にあるコードを使用しました。

これを拡張して、リストを昇順と降順で交互にソートする場合は、リストが現在どの順序であるかを追跡するための変数が必要になるか、そうでない場合は、リストが現在昇順であるかどうかを確認する必要があります。降順でソートし、その逆も同様です。

于 2013-02-20T14:31:39.530 に答える