Question

下面的脚本使用ajax将课程从addFollow更改为removeFollow。

点击后应该反过来 - 将班级从removeFollow更改为addFollow。

但由于某种原因，我总是得到第一个加载了页面的类。

当我检查代码时，类已更改。但是当页面加载时，JS仍然获得第一个类。

为什么会这样，我该如何解决？

// 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" );

用ajax改变类

1 个答案: