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

Question

我在使用 jquery 时遇到了一点问题，希望得到您的帮助。我有一个自定义的可排序选项卡，但是，当我单击所选项目时，我必须单击两次才能更改顺序。

这是一个脚本演示：http: //jsfiddle.net/7e3UV/1/

尝试单击 .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('↑');
        }
        else
        {
            console.log('active desc');    
            self.data('order', 'asc');
            self.children('span').html('↓');
        }

    }

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

    e.preventDefault();
});

Answer 1

你需要交换你的↓和↑。您有一个向下箭头用于在 html 中降序，然后是一个向下箭头用于在代码中升序，一个向上箭头用于降序。

Answer 2

第一次单击使链接处于活动状态。只要链接处于活动状态，每次单击都会更改排序方向。

这就是为什么您必须单击两次的原因。第一次单击以激活，第二次单击以更改排序顺序。