Jquery $（此）AJAX内部成功不起作用

我正在尝试更改一些使用onclick的旧代码，以便使用$this。问题是$this在success中不起作用。在不将其设置为var的情况下，是否仍然可以执行此操作

$('.addToCart').click(function() {

    $.ajax({
        url: 'cart/update',
        type: 'post',
        data: 'product_id=' + $(this).attr("data-id"),
        dataType: 'json',
        success: function(json) {

            if (json['success']) {

            $(this).addClass("test");

            }   
        }
    });

});

问题 在回调内部，这是指Ajax调用的jqXHR对象，而不是事件处理程序绑定到的元素

解决 如果您可以使用ES2015+，那么使用箭头功能可能是最简单的选择：

$.ajax({
    //...
    success: (json) => {
         // `this` refers to whatever `this` refers to outside the function
    }
});

您可以设置：

此对象将成为所有Ajax相关回调的上下文。默认情况下，上下文是一个对象，表示调用$.ajaxSettings中使用的ajax设置与传递给$.ajax…的设置合并

或使用：

或者在回调外部保留对此值的引用：

var element = this;

$.ajax({
    //...
    success: function(json) {
         // `this` refers to the jQXHR object
         // use `element` to refer to the DOM element
         // or `$(element)` to refer to the jQuery object
    }
});

相关的

---

随着我对JavaScript的使用越来越熟练，构建越来越大的复杂项目，我终于明白了这一点，但看到这个答案让我知道我的假设是正确的，而不仅仅是理论上的，所以我个人非常感谢你们，即使反对这样的评论政策=我同意并感谢，这三种选择都有效。我不知道ajax上下文选项。一个小缺点是，我的IDE Phpstorm无法识别该选项，该选项解决了它在JS闭包中检测到的范围问题，例如。添加代理包装确实会使警告消失，因此上下文：这在其庞大的启发式列表中肯定是一个未知的技巧。上下文选项同上。很好的工作，很好的例子！

$.ajax({
    //...
    success: $.proxy(function(json) {
         // `this` refers to the second argument of `$.proxy`
    }, this)
});

var element = this;

$.ajax({
    //...
    success: function(json) {
         // `this` refers to the jQXHR object
         // use `element` to refer to the DOM element
         // or `$(element)` to refer to the jQuery object
    }
});

jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try {
                    jQuery.ajax({
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) {
            if(data){
                  jQuery(this).html(data);
            }else{
                  jQuery(this).html(myArr[0]);
            }
                        }
                    });
                } catch (e) {
                } 


});