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

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

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

Answer 2

将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);

Answer 3

将this分配给

之类的变量

$(".like-grid-span").click(function() {...

     var self = this;

然后在其他地方使用self。

Answer 4

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

这个关键字在AJAX请求jQuery中

4 个答案: