jQuery：ajaxリクエスト後のボタンのアクションと属性の変更

お願いします。私は「フォロー」ボタンを持っています。ボタンを押すと、javascriptのクリックイベントが発生し、いくつかのAjaxリクエストが行われます。すべてOKなら、「Follow」ボタンを「Unfollow」ボタンに置き換えて、適切なコードを入力する必要があります。これまではボタンのテキストのみを変更できますが、ユーザーがフォローしてからページをリフレッシュせずにフォローしたい場合、私のコードは機能しません。ここでjQuery：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 +"https://stackoverflow.com/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;});

出典

2012-02-19 Milen Mihalev

つの提案：

1つ：f ollowingは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>

：あなたは、この削除と追加が（私たちが話している合計どのように多くのボタンとターゲットプラットフォームが何であるかを知らない）あなたのパフォーマンスの問題を引き起こす秒をチェックアウトすることができると感じた場合スニペット。あなたのスパンに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>

出典

2012-02-19 15:49:14 mazerraxuz

jQuery：ajaxリクエスト後のボタンのアクションと属性の変更

答えて

関連する問題