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请求）对象。

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

检查此代码段

$(".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(..)中的按钮，您可以事先保存其参考：

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

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


    }

});

});

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

3 个答案: