jQuery AJAX 在成功函数中引用 $(this)答案

【问题标题】：jQuery AJAX referencing $(this) within success functionjQuery AJAX 在成功函数中引用 $(this)
【发布时间】：2011-06-26 07:17:13
【问题描述】：

我有一个投票系统，它将点击项目的 id 发送到 PHP 脚本，PHP 更新数据库并通过 JSON 编码数组回显新的投票计数。

这是 jQuery：

$(".vote_up").click(function(){
    var id = this.id;
    var vote = $(this).attr("class");
    var data = "id=" + id + "&vote=" + vote;
    $.ajax
        ({
            type: "POST",
            url: "vote.php",
            data: data,
            cache: false,
            success: function(data)
            {
                for(var x in data) {
                         $(".votes_up").find(id).html(data[x].vote_up);
                         $(".votes_down").find(id).html(data[x].vote_down);
                }
            }
    });
});

所以当我首先构建项目时，我会在数据库中获取记录 ID 并将其设置为项目 ID。所以我想做的是引用被点击的确切项目并将它的 HTML 设置为从 PHP 返回的数据。我已经检查了 Firebug，我得到了正确的数据，但票数没有改变。有什么想法吗？

这是供参考的PHP：

$query = "SELECT vote_up, vote_down FROM posts WHERE id = '".$id."'";
$result1 = mysql_query($query);
$output = Array();
while ($row = mysql_fetch_array($result1)){
    $output[] = Array(
        "vote_up" => $row['vote_up'],
        "vote_down" => $row['vote_down'],
    );
}
echo json_encode($output);

【问题讨论】：

html 是什么样的？
它全部由 PHP 构建，但遵循
The Item
假设您对 $(".votes_down").click 有相同的功能？
你是说你想让success:回调中的this成为被点击的元素吗？
是的，所以无论点击什么，我都想将 .html() 设置为 PHP 返回的任何内容

标签： php jquery ajax json

【解决方案1】：

如果您只想让success: 回调中的this 引用被点击的元素，只需为AJAX 请求设置context: 属性即可。

$.ajax({
        context: this,  // set the context of the callbacks
        type: "POST",
        url: "vote.php",
        data: data,
        cache: false,
        success: function(data) {
           // now "this" refers to the element that was clicked
        }

你可以通过做一些更通用的事情来测试它，比如：

$(this).html("yep, it works");

...如果可行，请考虑在循环中对同一元素执行.html() 并没有真正意义，因为每次.html() 都会覆盖整个内容。

如果您要从循环中附加数据，请改用 .append()：

for(var x in data) {
         $(this).append(data[x].vote_up);
         $(this).append(data[x].vote_down);
}

【讨论】：

【解决方案2】：

不会：

$(".votes_up").find(id).html(...);

真的只需要：

$('#' + id).html(..);

【讨论】：

我明白你的意思，但它不起作用。但是通过查看它，我会认为它会起作用！

【解决方案3】：

如果您在 click() 方法回调中定义了一个变量，您将能够在您的 ajax 成功回调中引用它。你应该做类似的事情：

$(".vote_up").click(function(){
// Assign the clicked element to a scoped variable...
var target = $(this);
var id = this.id;
var vote = $(this).attr("class");
var data = "id=" + id + "&vote=" + vote;
$.ajax
    ({
        type: "POST",
        url: "vote.php",
        data: data,
        cache: false,
        success: function(data)
        {
            for(var x in data) {
                // Then refer to it within your callback
                target.html(data[x].vote_up);
                target.html(data[x].vote_down);
            }
        }
    });
});

【讨论】：