Question

我有使用JQuery和AJAX将产品添加到收藏夹中的代码，我的JavaScript代码如下：

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

和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>

此代码有效，它将产品添加到后端的“收藏夹”列表中（因此AJAX可以工作，并且它返回有效结果1或-1），但是此调用$(this).addClass("active");并未将CSS类添加到{{1} }标签。

Answer 1

您必须将$(this)存储在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不会指向您正在考虑的元素，而是将this存储在变量中，并在ajax回调函数中使用该变量：

$('.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

那是因为锚定元素的上下文在ajax回调函数中丢失了。您可以使用ajax中的context选项设置上下文。参见 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");
               }
    }
})

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

4 个答案: