Question

我对jquery有一点问题并指望你的帮助。我有一个自定义的可排序标签，但是，当我点击所选项目时，我必须单击两次，以更改顺序。

尝试点击.active类按钮，例如，在第一个链接上，您会看到它需要点击第二次更改它的箭头...

所以，任何人都可以帮助我，理解为什么这样做？

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();
});

Answer 1

您需要更换↓和↑。你有一个向下箭头用于在html中降序，但是有一个向下箭头用于代码中的升序，并带有一个向下箭头用于降序。

Answer 2

第一次点击即可激活链接。只要链接处于活动状态，每次附加点击都会更改排序方向。

这就是你必须点击两次的原因。首先单击以激活，第二个单击以更改排序顺序。

jquery需要在选定的选项卡上单击两次

2 个答案: