Jquery - 无法使用 $(this) 定位正确的元素 [重复]答案

【问题标题】：Jquery - can't target the right element with $(this) [duplicate]Jquery - 无法使用 $(this) 定位正确的元素 [重复]
【发布时间】：2012-01-28 01:40:24
【问题描述】：

可能重复：
$(this) doesn't work in a function

在我的代码中定位正确的元素时遇到问题。我的页面上有一个缩略图列表，当您单击“我不喜欢这个”图标时，目标视频会更改为另一个。

这是 HTML

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
       <div>
          <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
       </div>
   </div>
   <a href="...">
   <h1>...</h1>
   <div class="information">...</div>
</li>

Ajax 是：

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

我做错了什么？甚至 $(this).css("border","1px solid red") 都不是“工作”。（我尝试了背景颜色和颜色）我什么也没看到。

$(This) 指的是调用函数的“a”标签吗？所以我正在寻找他的父母名为 videobox... 帮助？

所以我可以定位

【问题讨论】：

标签： javascript jquery this-pointer

【解决方案1】：

你不应该使用onclick，你应该将它绑定到一个事件，特别是如果用户没有ajax，你可以很容易地让它降级。

将您的 <a> 标签更改为：

<a href="/change/videos/1/thumbsdown/"
    data-sort="sort"
    data-page="page"
    class="dislike_black"
    title="I dislike this"></a>

jQuery 事件：

$('.dislike_black').click(function(e) {
    e.preventDefault(); // Prevent link from clicking

    var $aTag = $(this); // I use $aTag to denote a jq object

    $.ajax({
        url: $aTag.attr('href'),
        type: "POST",
        data: {
            "sort": $aTag.data('sort'), // data-sort attr value
            "page": $aTag.data('page') // data-page attr value
        },
        success: function(response) {
            $aTag.closest(".videoBox").html(response);
        }
    });
});

现在它可以在没有 javascript 的情况下工作，而且您没有使用讨厌的 onclick！未经测试/无保修。

【讨论】：

问题出在this。查看链接的副本。
Dunhamzzz，它不起作用！ :(
@RébeccaO'Brien 现在看看。

【解决方案2】：

几乎。为了完成这项工作，您需要将context 传递给.ajax() 调用。

喜欢

$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST", 
    context: document.body, // for instance
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(data) {
        //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
        $(this).parent("li.videoBox").html(data); // Cant get this to work!
    }
});

上面的代码会导致所有的 ajax 处理程序都有this 指向document.body。因此，您需要将 document.body 替换为您要查找的元素。因此，例如，如果您以某种 click handler 调用您的函数，您只需调用 context: this 即可完成。

有关详细信息，请参阅jQuery Ajax Doc“上下文”部分。

【讨论】：

【解决方案3】：

我相信您需要更改原始代码的只是在成功函数之外获取对 this 的引用，如下所示：

function ThumbsDown(id,sort,page) {
    var self = this
    $.ajax({
        url: "/change/videos/"+id+"/thumbsdown/",
        type: "POST",
        data: {
            "sort": sort?sort:"",
            "page": page?page:""
        },
        success: function(data) {
            //$("#content .videoList ul li.videoBox").html(data); // THIS IS WORKING, but replaces ALL the divs
            $(self).parent("li.videoBox").html(data); // Cant get this to work!
        }
    });

【讨论】：