在两个类之间切换jQuery =可行，但额外点击

Question

<a href="#" class="sort">Sort</a> 


   $(".sort").click(function (event) {
        $(this).toggle(function() {
                $(this).toggleClass("sortUp","sortDown");
            }, function() {
                $(this).toggleClass("sortDown","sortUp");
           });
    });

it works but I need to click once before it works. so - click (nothing happens), click (sortUP), click (sortDown)

I would like to remove first click.

Thank you community for the help !

Answer 1

Firstly, you're using toggleClass incorrectly. You appear to want to toggle sortDown and sortUp on each click. That's done with toggleClass("sortDown sortUp") .

Secondly, you need your class .sort to either have sortUp or sortDown set in its class property when you load the page. eg <a href="#" class="sort sortDown"> . This makes sure you can reason about your code (ie it's always true that exactly one of sortUp, sortDown are set on your div ).

Thirdly, $(this).click(function() { /* code */ }) means "when somebody clicks, do /*code*/ ". You've wrapped your

$(this).click(function() { $(this).toggleClass("sortUp sortDown"); })

which sets up the click behaviour, in a $(".sort").click(function () { which means you are requiring an initial click on "sort" just to start the behaviour.

So the correct version is:

<a href="#" class="sort sortDown">Sort</a> 


   $(document).ready(function () {
        $(".sort").click(function() {
                $(this).toggleClass("sortUp sortDown");
        });
    });

Answer 2

It looks like you are adding the click events on the first click, also if you want to switch between sortUp and sortDown you can simply specify them both. As long as the element starts with one or the other (not both and not neither), it will swap them each time.

$(".sort").click(function() {
    $(this).toggleClass('sortUp sortDown');
});

You can see this running on JSFiddle .

Answer 3

if you dont' want to begin with a sortUp or sortDown class, do this:

<a href="#" class="sort">Sort</a> 

$(".sort").click(function (event) {            
    if($(this).hasClass("sortUp") || $(this).hasClass("sortDown")){
        $(this).toggleClass("sortUp sortDown");
    }else{
        $(this).addClass("sortUp");
    }
});