1

jquery に少し問題があり、あなたの助けを頼りにしています。カスタムの並べ替え可能なタブがありますが、選択したアイテムをクリックすると、順序を変更するために 2 回クリックする必要があります。

ここにスクリプトのデモがあります: http://jsfiddle.net/7e3UV/1/

たとえば、最初のリンクで.activeクラスボタンをクリックしようとすると、矢印を変更するために2回目にクリックする必要があることがわかります...

それで、誰かが私を助けてくれますか、なぜこれがそのようになっているのか理解できますか?

HTML:

<div id="sort">
    <a href="#" data-sort="views" data-order="desc" class="active">views <span>&darr;</span></a>
    <a href="#" data-sort="rating" data-order="desc">rating <span>&darr;</span></a>
    <a href="#" data-sort="date" data-order="desc">date <span>&darr;</span></a>                         
</div><!-- #sort -->

JS:

var body = $('body');

body.on('click', 'div#sort > a', function(e){

    var self = $(this);

    // if clicked on active tab
    if( self.hasClass('active') )
    {
        console.log('active');

        if( self.data('order') === 'asc' )
        {                    
            console.log('active asc');
            self.data('order', 'desc');
            self.children('span').html('&uarr;');
        }
        else
        {
            console.log('active desc');    
            self.data('order', 'asc');
            self.children('span').html('&darr;');
        }

    }

    // add and remove .active class
    self.addClass('active').siblings().removeClass('active');

    e.preventDefault();
});
4

2 に答える 2

4

と を交換する必要があり&darr;ます&uarr;。html では降順の下向き矢印がありますが、コードでは昇順の下向き矢印、降順の上向き矢印があります。

于 2012-07-17T17:19:33.133 に答える
0

最初のクリックでリンクがアクティブになります。リンクがアクティブになるとすぐに、追加のクリックごとにソート方向が変わります。

これが、2 回クリックする必要がある理由です。最初にクリックしてアクティブにし、2 番目に並べ替え順序を変更します。

于 2012-07-17T17:17:58.587 に答える