クリックしたhrefのトグルクラス

Question

同じクラスの.buttonを持つhrefのセットの一部であるhrefをクリックすると、Ajaxリクエストが発生します。 HTMLは次のようになります。

<div id="button-container"> 
    <a href="#" class="button red" data-id="1"></a> 
    <a href="#" class="button red" data-id="2"></a> 
    <a href="#" class="button red" data-id="3"></a> 
    <a href="#" class="button red" data-id="4"></a> 
</div> 

HREFのは.button自身がdiv要素#button-containerに別々のAJAX呼び出しを介してロードされ、ページのロード時に利用できていないクラスを持つ、以来、私は上のjQueryを使用しています（）発射するアヤックスhrefの.buttonをクリックしてください。 javacriptは次のようになります。

jQuery('#button-container').on('click', '.button', function(e){ 
    e.preventDefault(); 

    var id = jQuery(this).data('id'); 

    jQuery.ajax({ 
     url: ajaxVars.ajaxurl, 
     type:'POST', 
     async: true, 
     cache: true, 
     timeout: 10000, 
     data: 'action=button_action&id=' + id, 
     success: function(value){ 
      if (parseInt(value) == id) { 
       jQuery(this).removeClass('red').addClass('green'); 
      } else { 
       jQuery(this).removeClass('green').addClass('red'); 
      } 
     }, 
     error: function() { 
      //alert(error); 
     } 
    }); 
}); 

ajaxは必要に応じて起動し、成功するとサーバーから応答が返されます。成功すると、href .buttonの色を表すクラスを.redから.greenに切り替える必要があります。逆も同様です。これが私の問題です。コンソールにエラーa.ownerDocument is undefinedが表示されます。これは、クラスを削除するときに発生します。また、「クリックされたhrefのクラスを切り替えるだけ」する必要があるため、jQuery(this)を使用しています。

上記のシナリオでhrefのクラスを個別に切り替える方法に関するアイデアはありますか？

よろしく、 ジョン

Answer 1

にidプロパティを追加します。これで

jQuery.ajax({ 
    url: ajaxVars.ajaxurl, 
    type:'POST', 
    async: true, 
    cache: true, 
    timeout: 10000, 
    data: 'action=button_action&id=' + id, 
    context: this, // <-- HERE 
    success: function(value){ 
     if (parseInt(value, 10) == id) { 
      jQuery(this).removeClass('red').addClass('green'); 
     } else { 
      jQuery(this).removeClass('green').addClass('red'); 
     } 
    }, 
    error: function() { 
     //alert(error); 
    } 
}); 

Answer 2

わからない、多分$（この）そして$アヤックスの呼び出し前に変数に$（this）をキャッシュしてみてください、もうあなたがクリックしたボタンに参照のうえ、とされていませんその変数を使用してクラスを削除/追加します。

var $this = $(this); 
jQuery.ajax({ 
    .......... 
    success: function(value) { 
     ...... 
      $this.removeClass('red').addClass('green'); 

Answer 3

私がしようとするだろう：

if (parseInt(value) == id) { 
    jQuery("#" + id).removeClass('red').addClass('green'); 

} else { 
    jQuery("#" + id).removeClass('green').addClass('red'); 
} 

し、HTMLにthisがアンカーではない、あなたの.ajax()成功コールバック内aタグ