$ (นี้) ภายในความสำเร็จของ AJAX ไม่ทำงาน

Question 1

ฉันกำลังพยายามเปลี่ยนรหัสเก่าที่ใช้ onclick เพื่อให้ฉันใช้ $ (this) ปัญหาคือ $ (this) ไม่ทำงานเมื่ออยู่ในความสำเร็จ จะมีการทำเช่นนี้โดยไม่ตั้งค่าเป็นตัวแปรหรือไม่

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

            }   
        }
    });

});

Question 2

ปัญหา

ภายในการเรียกกลับthisหมายถึงjqXHRออบเจ็กต์ของการเรียก Ajax ไม่ใช่องค์ประกอบที่ตัวจัดการเหตุการณ์ถูกผูกไว้ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการthisทำงานใน JavaScript

แนวทางแก้ไข

หาก ES2015 + พร้อมใช้งานสำหรับคุณการใช้ฟังก์ชันลูกศรน่าจะเป็นตัวเลือกที่ง่ายที่สุด:

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

คุณสามารถตั้งค่าcontextตัวเลือก :

วัตถุนี้จะสร้างบริบทของการเรียกกลับที่เกี่ยวข้องกับ Ajax ทั้งหมด โดยค่าเริ่มต้นบริบทคือวัตถุที่แสดงถึงการตั้งค่า ajax ที่ใช้ในการโทร ( $.ajaxSettingsรวมเข้ากับการตั้งค่าที่ส่งไปยัง$.ajax) (... )

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

หรือใช้$.proxy:

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

หรือเก็บข้อมูลอ้างอิงถึงค่า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
    }
});

ที่เกี่ยวข้อง

จะเข้าถึง "this" ที่ถูกต้องภายในการโทรกลับได้อย่างไร

Question 3

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) {
                } 


});