Schaltfläche Ändern Funktionalität jQuery

Question

Ich habe diesen Code in Zweig bekam

{% if followsId == null %} 
      <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow"> 
       Follow 
      </div> 
{% else %} 
      <div id="unFollowUser" class="follow" data-followsId="{{ followsId }}"> 
       Unfollow 
      </div> 
{% endif %} 

Ich wollte nur Inhalte und Funktionen auf, klicken Sie auf Schaltfläche ändern und versucht, diesen Code mit jQuery

$('#followUser').click(function() { 
    var userId  = $(this).attr('data-userId'), 
     action  = $(this).attr('data-action'), 
     currentUser = $(this).attr('data-currentUserId'); 

    $.ajax({ 
     method: 'POST', 
     url: "/sci-profile/profile/follow", 
     data: { 
      userId: currentUser, 
      profileUserId: userId, 
      action: action 
     }, 
     success: function(response) 
     { 
      $('#followUser').attr('id', 'unFollowUser') 
          .text('Unfollow') 
          .fadeOut(50) 
          .delay(50) 
          .fadeIn(50); 
     } 
    }); 
}); 

Mit diesem Code auf der Seitenquelle sehe ich unterschiedliche ID und unterschiedlichen Text auf der Schaltfläche, aber wenn ich das zweite Mal klicke, rufe ich die erste Schaltfläche auf, als ob sie sich nie geändert hätte. Gibt es eine Möglichkeit, den Speicher für dieses Element zu aktualisieren, oder mache ich von Anfang an etwas falsches?

Answer 1

denke ich, Ihr Code sollte dies wie

{% if followsId == null %} 
      <div data-action="follow" class="follow" data-user-id="{{ profileUserData.id }}"> 
       Follow 
      </div> 
{% else %} 
      <div data-action="unfollow" class="follow" data-user-id="{{ followsId }}"> 
       Unfollow 
      </div> 
{% endif %} 

Keine Notwendigkeit, Strom in Benutzer-ID angemeldet zu speichern, weil Sie es von Sitzung greifen :)

Ihre Ajax-Code sollte wie folgt

sein

$('.follow').click(function() { 
    var _this= $(this); 
    var userId = $(this).data('user-id'); 
    var action =$(this).data('action'); 

    $.ajax({ 
     method: 'POST', 
     url: "/sci-profile/profile/follow", 
     data: { 
      profileUserId: userId, 
      action: action 
     }, 
     success: function(response) 
     { 
      if(action=="follow") 
      { 
       _this.attr('data-action', 'unfollow').text('Unfollow'); 
      } 
      else 
      { 
       _this.attr('data-action', 'follow').text('Follow'); 
      } 
     } 
    }); 
}); 

Hoffe, dass Sie meine Antwort mögen und es abstimmen, markieren Sie als richtig, wenn es richtig :)