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

I don't know if $(this) selector work in ajax success or not , here is the code :

我不知道$（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')"
        });
        }


        }

    });

});

I need to change the background of the selected button , So any help will be welcomed

我需要更改所选按钮的背景，因此欢迎任何帮助

3 个解决方案

#1

this here refers to XHR(ajax request) object.

这里指的是XHR（ajax请求）对象。

you can change the reference either using call/apply or copy the reference into a variable and use that

您可以使用call / apply更改引用，也可以将引用复制到变量中并使用它

check this snippet

检查这个片段

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


    }

  });

});

Hope it helps

希望能帮助到你

#2

Because this in success(..) function is pointing to a different thing then a button (usually the jqXHR object) .
To access button in success(..) you could save its reference beforehand :

因为这个成功（..）函数指向一个不同的东西然后是一个按钮（通常是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(..);
  }

or better yet assign the button as the ajax(..) context:

或者更好的是将按钮指定为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`
    } 
});

See the context section of jQuery Ajax documentation for more details.

有关更多详细信息，请参阅jQuery Ajax文档的上下文部分。

#3

'this' now represent the ajax request you can use this code

'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')"
            });
         }


    }

});

});

#1