这个关键字在AJAX请求jQuery

this keyword within AJAX request jQuery

本文关键字：请求 jQuery AJAX 关键字      更新时间：2023-09-26

点击更改选定div的css样式，如下所示:

$(".like-grid-span").click(function() {
  if ($(this).css('color') == "rgb(0, 0, 0)") {
    $(this).css({
      color: 'blue',
      transition: 'all .45s'
    });
    $('.like-count').html(data);
    $(this).prop('title', 'Rated as Good');
  } else {
    $(this).css({
      color: 'rgb(0, 0, 0)',
      transition: 'all .45s'
    });
    $(this).prop('title', 'Rate as Good');
  }
});

我刚刚在onclick函数中引入了ajax请求，并在成功回调中添加了其余的代码，但是我的这个关键字(指当前选定的div)现在不工作了，我知道它现在可能指的是ajax函数，但是我怎么还能用它来指选定的div?或者还有其他选择吗?

$(".like-grid-span").click(function() {
  var selected_offer_id = $(this).closest("ul.amenities").data('id');
  $.ajax({
    url: "/apexrealestates/goods/goodmechanism.php",
    type: "POST",
    data: {
      user_id: 1,
      offer_id: selected_offer_id
    },
    success: function(data) {
      if ($(this).css('color') == "rgb(0, 0, 0)" && data != false) {
        $(this).css({ // this is the my this keyword I'm talking about
          color: 'blue',
          transition: 'all .45s'
        });
        $('.like-count').html(data);
        $(this).prop('title', 'Rated as Good');
      } else {
        $(this).css({
          color: 'rgb(0, 0, 0)',
          transition: 'all .45s'
        });
      }
    },
    error: function(data) {
      alert("phat gea");
    }
  });

});

这是我的html:

<div class="row">
  <div class="listing_tile item col-sm-4">
    <div class="options">
      <a data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body" type="button" data-html="true" href="#" id="login">Login</a>
      <div id="popover-content" class="hide">
      </div>
    </div>
    <div class="image">
      <a href="./property/detail.php">
        <span class="btn btn-default"><i class="fa fa-file-o"></i> Take a Look</span>
      </a>
      <img src="img/property2.jpg" alt="" />
    </div>
    <div class="favt-grid-div" title="Add to Wishlist">
      <i class="fa fa-star"></i>
    </div>
    <div class="price">
      <i class="fa fa-home"></i>For Sale
      <span>PKR 2500000</span>
    </div>
    <div class="info">
      <h3 class="text-center">
                <a href="#">Apartment in Bahria</a>
                <small><?= getExcerpt('556-Safari villas bahria town Lahore'); ?></small>
            </h3>
      <h4 class="text-center text-danger"><b>Lahore</b></h4>
      <ul class="amenities" data-id="2">
        <li><i class="fa fa-arrows"></i> 45 Sq-Ft</li>
        <li title="click to Rate"><span class="like-grid-span"><i class="fa fa-thumbs-o-up"></i></span><span class="like-count">26</span> Likes</li>
      </ul>
    </div>
  </div>
</div>

请帮忙，谢谢。

通过$.ajax()方法中的context选项:

$.ajax({
    context: this,
    //...
});

将this引用存储在变量中，然后在success回调方法中使用

$(".like-grid-span").click(function() {
    var _self = $(this); //Store reference
    $.ajax({
        success: function(data) {
            //Use the variable
            _self.css({ });
        }
      });
});

另外，您可以使用context，它在回调中设置this的值。

$.ajax({
    context: this,
});

编辑、解除绑定和绑定点击处理程序

function likeClickHandler() {
    var _self = $(this);
    //Unbind click handler
    _self.off('click')
    $.ajax({
        success: function(data) {
            //Use the variable
            _self.css({
            });
            //Bind Click handler
            _self.on('click', likeClickHandler);
        }
      });
}
$(".like-grid-span").on('click', likeClickHandler);

将this赋值给像

这样的变量
$(".like-grid-span").click(function() {...
     var self = this;

然后在其他地方使用self。

将$(this)对象赋值给javascript变量。

 var thisOBJ;
 $(".like-grid-span").click(function() {
    thisOBJ = $(this);
    // success function 
    success: function(data) {
    if (thisOBJ.css('color') == "rgb(0, 0, 0)" && data != false) {
        thisOBJ.css({ // this is the my this keyword I'm talking about
         color: 'blue',
        transition: 'all .45s'
       });
 });
相关文章：