jQuery：在ajax请求后更改按钮操作和属性

Question

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

这是我的“关注”按钮的 html：

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

这是“取消关注”按钮的 html：

<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>