Question

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

这是我关注按钮的html：

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

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

1 个答案: