无法将类添加到单击的元素

Question

I have code for adding products into favorites using JQuery and AJAX, my JavaScript code looks like:

$('.product-item-btn-fav').on('click', function(e){
    b = $(this).data("product_number");
    $.ajax({
        type: "POST",
        url: domain + "/ajax/favorite/" + b,
        success: function (a) {
            var d = parseInt($(a).find("#result").html());
            if (d == 1) {
                $(this).addClass("active");
            } else {
                if (d == -1) {
                    $(this).removeClass("active");
                }
            }
        }
    })
});

And HTML:

<a class="product-item-btn-fav" data-product_number="[%item.product_number%]">
    <svg class="svg-icon-heart-filled">
        <use xlink:href="[%domain.url_media%]/images/svg-sprite.svg#svg-icon-heart-filled"></use>
    </svg>
</a>

This code works, it adds product into favorite list at backend side (so AJAX works and it returns valid result 1 or -1), but this call $(this).addClass("active"); doesn't add css class to <a> tag.

Answer 1

You have to store $(this) in variable for a

$('.product-item-btn-fav').on('click', function(e){
    b = $(this).data("product_number");
    var _t = $(this);
    $.ajax({
        type: "POST",
        url: domain + "/ajax/favorite/" + b,
        success: function (a) {
            var d = parseInt($(a).find("#result").html());
            if (d == 1) {
                _t.addClass("active");
            } else {
                if (d == -1) {
                    _t.removeClass("active");
                }
            }
        }
    })
});

Answer 2

this does not point the element you are thinking, store this in a variable and use that inside the ajax callback function:

$('.product-item-btn-fav').on('click', function(e){
  var b = $(this).data("product_number");
  var prod = $(this);
  $.ajax({
    type: "POST",
    url: domain + "/ajax/favorite/" + b,
    success: function (a) {
      var d = parseInt($(a).find("#result").html());
      if (d == 1) {
        prod.addClass("active");
      } else {
          if (d == -1) {
            prod .removeClass("active");
          }
        }
      }
   });
});

Answer 3

That is because context to anchor element is lost in ajax callback function. You can set the context using context option in ajax. See Ajax Docs :

$.ajax({
    type: "POST",
    context : this,
    url: domain + "/ajax/favorite/" + b,
     success: function (a) {
        var d = parseInt($(a).find("#result").html());
        if (d == 1) {
            $(this).addClass("active");
        } else {
            if (d == -1) {
                $(this).removeClass("active");
            }
        }
    }
})

Answer 4

$.ajax({
    type: "POST",
    context : this,
    url: domain + "/ajax/favorite/" + b,
     success: function (a) {
        var d = parseInt($(a).find("#result").html());
        if (d == 1) {
            $(this).addClass("active");
        } else {            
                $(this).removeClass("active");
               }
    }
})