為什么$（this）.css在ajax成功中不起作用？

Question

我不知道$（this）選擇器是否可以在ajax成功運行，這是代碼：

$(".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請求）對象。

您可以使用調用/應用更改引用，也可以將引用復制到變量中並使用

檢查此片段

$(".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

因為this success(..)函數指向的是不同於按鈕（通常是jqXHR對象）的東西。
要success(..)訪問按鈕success(..) ，可以預先保存其參考：

$(".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 文檔的上下文部分。

Answer 3

'this'現在代表您可以使用此代碼的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')"
            });
         }


    }

});

});