Ajax（这个）不起作用答案

【问题标题】：Ajax (this) not workingAjax（这个）不起作用
【发布时间】：2012-07-20 16:04:24
【问题描述】：

当试图访问 $container 的 '.box' 类时，在 ajax 调用中使用 (this) 不起作用。

$container.on(
        "click",
        ".box",
        function(event){
            var description;
            if($(this)[0].style.width == '70%'){
                $(this).find(".resultData").fadeOut('slow');
                $(this).css('width', '18%');
            }else{
                $.ajax({
                    url:'scripts/php/fetchResultsData.php',
                    data: {action:value},
                    type: 'post',
                    dataType: 'json',
                    success: function(data){
                        description = data[0];
                        $(this).css('width', '70%');
                        $(this).append("\
                            <div class='resultData'>\
                                <div class='resultName'>" + $(this).find("p").html() + "</div>\
                                <div class='resultDesc'>" + description +"</div>\
                            </div>");
                        /*alert($(this).find("p").html());*/
                    }
                    })
            }
            $container.masonry('reload');
        }
    );

如果不清楚我要做什么，我正在尝试更改动态元素的 css。但是例如，

$(this).css('width','70%');

根本没有调整css。如果我将它移到 ajax,success 部分之外，它可以工作，但是我无法获得“描述”。

【问题讨论】：

根据经验，尽量不要使用 $(this)，或者至少使用一次。但是，如果您多次需要它，请将其存储为：var $container = $(this) 并使用 $container。这增加了一点效率，但更加清晰。只是不要使用 $this，that，我到处都是，它破坏了目的。
这能回答你的问题吗？ How to access the correct `this` inside a callback?

标签： javascript jquery html ajax

【解决方案1】：

你已经接近了。在您使用它的上下文中，“this”指的是 ajax 请求，而不是发出事件的东西。要解决此问题，请在发出 ajax 请求之前存储此副本：

                   }else{
                        var me = this;
                        $.ajax({
                            ...
                            success: function(data){
                                description = data[0];
                                $(me).css('width', '70%');

【讨论】：

现在我正在看这一切似乎很简单！非常感谢！
这是 2012 年的答案，但也可以，谢谢

【解决方案2】：

只需将此添加到您的$.ajax 电话中...

context: this,

...它会起作用的。

$.ajax({
    context: this, // <-- right here
    url:'scripts/php/fetchResultsData.php',
    data: {action:value},
    type: 'post',
    dataType: 'json',
    success: function(data) { // ...

【讨论】：