用ajax更改类

Question

The script below changes the class from addFollow to removeFollow with ajax.

After clicking it should do the reverse - change the class from removeFollow to addFollow.

But for some reason I'm always getting the first class which was loaded with the page.

When I checked the code the class was changed. But the JS still getting the first class when the page loaded.

Why is that and how can I fix that?

// check if already following
if (is_following ($_SESSION['userDetails']['userID'], $_GET['ownerID']) )
{
    $follow_btnColor = "btn-primary";
    $follow_act = "removeFollow";
}
else
{
    $follow_btnColor = "btn-default";
    $follow_act = "addFollow";
}

LINK:

<a href="#" id="follow" class="btn btn-lg <?PHP echo $follow_btnColor ?> <?PHP echo $follow_act ?>" ownerID="<?PHP echo $_GET['ownerID'] ?>" ><i class="fa fa-paw"></i>  FOLLOW</a>

JS:

$(function() {
    $(".addFollow").click(function(){
        var element = $(this);

         $.ajax({
            type: "POST",
            url: "ajax/follow.php",
            data: info,
            success: function(){
            $("#loading").ajaxComplete(function()
            {
            }).slideUp();

            $(element).toggleClass( "addFollow , removeFollow" );   
            $(element).toggleClass( "btn-primary , btn-default" );  

           }
         });

        return false;
    });
});


$(function() {
    $(".removeFollow").click(function(){
        var element = $(this);

         $.ajax({
           type: "POST",
           url: "ajax/follow.php",
           data: info,
           success: function(){
               $("#loading").ajaxComplete(function()
                 {}).slideUp();

                $(element).toggleClass( "removeFollow , addFollow" );
                $(element).toggleClass( "btn-default , btn-primary" );
           }
         });

        return false;

    });

});

Answer 1

Try this in your js code
element.toggleClass( "removeFollow , addFollow" );
element.toggleClass( "btn-default , btn-primary" );