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

Question

我有一个投票系统,它将点击的项目的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);

Answer 1

如果您只想this在success:回调中引用被单击的元素,只需设置context:AJAX请求的属性即可.

$.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);
}