javascript - AJAX 请求 jQuery 中的 this 关键字

Question

单击时，我会像这样更改所选 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 请求，并在成功回调中添加了其余代码，但是我的 this 关键字(指的是当前选定的 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>

将不胜感激，谢谢。

Answer 1

传递 $.ajax() 方法的选项 context:

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