this keyword within AJAX request jQuery

Question

On click I change the css of the selected div like this:

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

});

I just introduced ajax request within the onclick function and added the rest of the code within the success call back, but my this keyword (that was refering to the current selected div) is not working now, I know it may be refering to ajax function now but how can I still use this to refer the selected div? Or is there any alternative?

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



});

Here is my 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>

Help would be appriciated, thanks.

Answer 1

Pass option context of $.ajax() method:

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