なぜ$（this）.cssはajaxの成功で動作しないのですか？

Question

私はアヤックス成功かどうかであれば$（この）セレクタの仕事を知っていない、ここでのコードは次のとおりです。

$(".up_button").click(function(){ 
    var idup_post=$(this).attr("data-idupactive"); 
    var userup_post=$(this).attr("data-userupactive"); 

    $.ajax({ 
     url:"ajax/up_actv.php", 
     data:{"idup":idup_post,"userup":userup_post}, 
     type:"POST", 
     success:function(data){ 

      if(data=="upactv"){ 
       alert(data); //just to check if ajax response is correct 
     $(this).css({ 
      "background-image":"url('icons/u.png')" 
     }); 
     } 
     if(data=="updisv"){ 
      alert(data); //just to check if ajax response is correct 
    $(this).css({ 
      "background-image":"url('icons/uf.png')" 
     }); 
     } 


     } 

    }); 

}); 

私が選択したボタンの背景を変更する必要がある、だから、任意のヘルプは

に歓迎されるだろう

Answer 1

ここでは、XHR（ajax request）オブジェクトを指します。あなたが変更することができます

参照いずれかを使用してコール/適用したり、変数に参照をコピーして使用することを

チェック

$(".up_button").click(function() { 
    var self = this; 
    var idup_post = $(this).attr("data-idupactive"); 
    var userup_post = $(this).attr("data-userupactive"); 

    $.ajax({ 
    url: "ajax/up_actv.php", 
    data: { 
     "idup": idup_post, 
     "userup": userup_post 
    }, 
    type: "POST", 
    success: function(data) { 

     if (data == "upactv") { 
     alert(data); //just to check if ajax response is correct 
     $(self).css({ 
      "background-image": "url('icons/u.png')" 
     }); 
     } 
     if (data == "updisv") { 
     alert(data); //just to check if ajax response is correct 
     $(self).css({ 
      "background-image": "url('icons/uf.png')" 
     }); 
     } 


    } 

    }); 

}); 

はそれが

Answer 2

success(..)のthisの機能が別のものを指しているので、ボタン（通常jqXHRオブジェクト）です。

$(".up_button").click(function(){ 
    var idup_post=$(this).attr("data-idupactive"); 
    var userup_post=$(this).attr("data-userupactive"); 
    var button = this; 
    : 
    : 
    success : function(data) { 
    : 
    $(button).css(..); 
    } 

以上をまだajax(..)コンテキストとして、ボタンを割り当てます：

$(".up_button").click(function() { 
    var idup_post = $(this).attr("data-idupactive"); 
    var userup_post = $(this).attr("data-userupactive"); 

    $.ajax({ 
    context: this, // 'this' refers to button 
    : 
    success: function(data) { 
     // now `this` refers to the value of `context` 
    } 
}); 

はのためのjQueryのAjax documentationのコンテキストを参照してくださいあなたは、事前にその参照を救うことができるsuccess(..)のボタンにアクセスするには
詳細はこちら

Answer 3

「これは」今表すがお役に立てば幸いです。このスニペットこのコードを使用できるAjaxリクエスト

$(".up_button").click(function(){ 
var idup_post=$(this).attr("data-idupactive"); 
var userup_post=$(this).attr("data-userupactive"); 

var up_btn = $(this); // put the button object inside var 

$.ajax({ 
    url:"ajax/up_actv.php", 
    data:{"idup":idup_post,"userup":userup_post}, 
    type:"POST", 
    success:function(data){ 

     if(data=="upactv"){ 
      alert(data); 
      up_btn.css({ // use the var insted of 'this' 
       "background-image":"url('icons/u.png')" 
      }); 
     } 
     if(data=="updisv"){ 
      alert(data); 
      up_btn.css({ // same thing 
       "background-image":"url('icons/uf.png')" 
      }); 
     } 


    } 

}); 

});