jQuery：在ajax请求之后更改按钮的动作和属性

Question

拜托我需要你的帮忙。 我有一个“关注”按钮。 当按下按钮时，将触发javascript click事件，然后发出一些ajax请求。 如果一切正常，则需要用正确的代码将“关注”按钮替换为“取消关注”按钮。 到目前为止，我只能更改按钮的文本..但这不是很好，因为如果用户要关注然后取消关注（不刷新页面），我的代码将无法工作。

这是我的HTML for Follow按钮：

<a href="javascript:;" class="genbutton btn-follow" id="follow-239618"><span>Follow</span></a>

这是取消关注按钮：

<a href="javascript:;" class="genbutton btn-unfollow" id="unfollow-239618"><span>Unfollow</span></a>

这是我的JavaScript：

    function sub(subAction, user_id) {                                                                                                              
    if(subAction == 'follow'){                                                                                                                  
        $("a#follow-"+ user_id +" span").addClass("loading");                                                                                   
    }                                                                                                                                           
    if(subAction == 'unfollow'){                                                                                                                
        $("a#unfollow-"+ user_id +" span").addClass("loading");                                                                                 
    }                                                                                                                                           
    $.ajax({                                                                                                                                    
        type: "post",                                                                                                                           
        url: "http://"+ siteDomain +"/a/subHandler",                                                                                            
        data: "do="+ subAction +"&user_id=" + user_id,                                                                                          
        success: function(data, textStatus){                                                                                                    
            if(subAction == 'follow'){                                                                                                          
                $("a#follow-"+ user_id +" span").removeClass("loading");                                                                        
            }                                                                                                                                   
            if(subAction == 'unfollow'){                                                                                                        
                $("a#unfollow-"+ user_id +" span").removeClass("loading");                                                                      
            }                                                                                                                                   
            var errorOccured = data["ERR"];                                                                                                     
            if(!errorOccured){                                                                                                                  
                if(subAction == 'follow'){                                                                                                      
                    $("a#follow-"+ user_id +" span").text("Unfollow");                                                                          
                }                                                                                                                               
                if(subAction == 'unfollow'){                                                                                                    
                    $("a#unfollow-"+ user_id +" span").text("Follow");                                                                          
                }                                                                                                                               
            }                                                                                                                                   
        }                                                                                                                                       
    }, "json");                                                                                                                                 
}                                                                                                                                               
$(".btn-follow").click(function(){var user_id = $(this).attr("id").replace('follow-', '');sub('follow', user_id);return false;});               
$(".btn-unfollow").click(function(){var user_id = $(this).attr("id").replace('unfollow-', '');sub('unfollow', user_id);return false;});         

Answer 1

两个建议：

一：以下没有jquery的作品。 可能会有更好的方法来做到这一点（甚至可能会有一些jquery魔术可以用更少的代码行来实现相同的目的），但这就是我要做的。 您可以简单地将其复制并粘贴到新文件中，然后查看其工作情况。 此代码片段删除了旧按钮，然后添加了新按钮。

<html>
<head>
    <title>unfollow example</title>
    <script type="text/javascript">
        function switchFollow() 
        {
            var buttonParent = document.getElementById('PARENTCONTAINEROFBUTTON');
            var oldButton = document.getElementById('FOLLOWBUTTON');
            buttonParent.removeChild(oldButton);
            var newButton = document.createElement('a');
            newButton.setAttribute('id', 'unfollowbutton');
            newButton.setAttribute('href', '#unfollow');
            var newButtonText = document.createElement('span');
            newButtonText.innerHTML = "unfollow";
            newButton.appendChild(newButtonText);
            buttonParent.appendChild(newButton); 
            }   
    </script>
</head>
<body>
    <div id="PARENTCONTAINEROFBUTTON">
        <a id="FOLLOWBUTTON" href="#follow"><span>follow</span></a>         
    </div>
    <div id="othercontainer">
        <button onclick="switchFollow()">switch to unfollow</button>
    </div>
</body>

二：如果您认为此删除和添加操作可能会导致性能问题（不知道我们正在讨论的按钮总数以及您的目标平台是什么），请查看第二段。 如果您给span指定一个ID，则无需删除和添加即可更改文本和href。

<html>
<head>
    <title>unfollow example 2</title>
    <script type="text/javascript">
        function switchFollow() 
        {
            button = document.getElementById('FOLLOWBUTTON');
            button.setAttribute('id', 'UNFOLLOWBUTTON');
            button.setAttribute('href', '#unfollow');
            buttonText = document.getElementById('buttontext');
            buttonText.innerHTML = "unfollow";
            }   
    </script>
</head>
<body>
    <div id="PARENTCONTAINEROFBUTTON">
        <a id="FOLLOWBUTTON" href="#follow"><span id="buttontext">follow</span></a>         
    </div>
    <div id="othercontainer">
        <button onclick="switchFollow()">switch to unfollow</button>
    </div>
</body>