Изменить функциональность кнопки JQuery

Question

Я получил этот код в веточке

{% 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 %} 

Я просто хотел, чтобы изменить содержание и функциональность кнопки на мыши и попытался этот код 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); 
     } 
    }); 
}); 

С помощью этого кода на странице источника Я вижу разные идентификаторы и другой текст на кнопке, но при нажатии второй раз я вызываю первую кнопку, как будто она никогда не менялась. Есть ли способ обновить память для этого элемента или я ошибаюсь с самого начала?

Answer 1

Я думаю, что ваш код должен нравится этот

{% 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 %} 

Нет необходимости хранить вошедшего в идентификатор пользователя, потому что вы можете получить его от сессии :)

Ваш Ajax код должен быть, как этот

$('.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'); 
      } 
     } 
    }); 
}); 

Надеюсь, вам понравится мой ответ и на голоса его, отметьте, как правильно, если это правильно :)