AJAXの結果でjqueryを使用してアイコンを変更する

Question

リンクをクリックした後、AJAX経由で返されたリストがあります。リストには、リストエントリをブックマークするために使用されるフォントの素晴らしいリンクがあります。ブックマークはAJAX経由で行われ、正常に動作します。データベースは更新されています。

ただし、更新後、ブックマークアイコンをfa-bookmark-oからfa-bookmarkに変更し、アイコンを緑色にするために、クラス​​を追加します。これは動作していません。以下のコード。

HTML：目で

<a href="#" id="bookmark" class="bookmark" title="Bookmark" bookmark_id="12345"><i class="fa fa-bookmark-o"></i><i class="fa fa-bookmark"></i></a> 

CSS

.bookmark:hover .fa-bookmark-o, 
.bookmark .fa-bookmark 
{ 
color: #27ae60; 
display: none; 
text-decoration: none; 
} 
.bookmark:hover .fa-bookmark 
{ 
color: #27ae60; 
display: inline; 
text-decoration: none; 
} 

SCRIPT

<script type="text/javascript"> 
    $(document).on('click', '#bookmark', function(e) { 
     var bookmark_id = $(this).attr('bookmark_id'); 

     $("#loaderIcon").show(); 
     $.ajax({ 
      type: 'POST', 
      url: '<?php echo base_url(); ?>bookmark', 
      data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', bookmark_id}, 
      dataType: 'json', 
      success:function(data){ 
       if(data.status == 'X') 
       { 
        $(this).find('i').removeClass('fa-bookmark-o'); 
        $(this).find('i').addClass('fa-bookmark'); 
        $(this).find('i').addClass('green'); 
       } 
      }, 
     }); 
    }); 
</script> 

Answer 1

this AJAX呼び出しのコールバックは、イベントハンドラと同じではありません。

複数のソリューションがありますが、最も簡単な1が閉鎖に変数を格納し、AJAXハンドラでそれを使用することです

$(document).on('click', '#bookmark', function(e) { 
    var me = $(this); 
    var bookmark_id = me.attr('bookmark_id'); 

    $("#loaderIcon").show(); 
    $.ajax({ 
     type: 'POST', 
     url: '<?php echo base_url(); ?>bookmark', 
     data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', bookmark_id}, 
     dataType: 'json', 
     success:function(data){ 
      if(data.status == 'X') 
      { 
       me.find('i').removeClass('fa-bookmark-o'); 
       me.find('i').addClass('fa-bookmark'); 
       me.find('i').addClass('green'); 
      } 
     }, 
    }); 
    }); 

他にも改良が可能であるが、私は問題を解決するために最少の変化に焦点を当てました

その他の方法：脂肪矢印機能、Function.bind

Answer 2

あなたは、変数に現在のオブジェクト$(this)を保存する内部$(this)いるので、成功コールバックでそれを使用する必要があります

$(document).on('click', '#bookmark', function(e) { 
    var _this = $(this); 
    ... 
     success:function(data){ 
      if(data.status == 'X') 
      { 
       _this.find('i').removeClass('fa-bookmark-o'); 
       _this.find('i').addClass('fa-bookmark green'); 
      } 
     }, 
    ... 
}); 

・ホープ、このことができます：成功のコールバックはAjax呼び出しのjqXHR対象とbookmarkをクリックしてこれ以上を指します。