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

I have a voting system which sends an id of the clicked item to a PHP script, the PHP updates the database and echos back the new vote counts via an JSON encoded array.

我有一个投票系统，该系统向PHP脚本发送被单击项目的id, PHP更新数据库，并通过JSON编码的数组回传新的选票计数。

This is the jQuery:

这是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);
                }
            }
    });
});

So when i construct the item in the first place, i take the record ID in the database and set it as the items ID. So what i'm trying to do is reference the exact item that was clicked and set it's HTML to the data thats coming back from the PHP. I've checked in Firebug and I'm getting correct data back but the count of votes isnt changing. Any ideas?

所以当我构建项目首先,我把数据库中的记录ID并将它设置为条目ID。所以我想做的是参考的项目,点击并设置它的HTML数据从PHP回来。我检查了Firebug，得到了正确的数据，但是投票数没有变化。什么好主意吗?

This is the PHP for reference:

这是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);

3 个解决方案

#1

If you just want this in the success: callback to refer to the element that was clicked, just set the context: property for the AJAX request.

如果您只想在成功中获得这个:回调引用被单击的元素，只需设置上下文:用于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
        }

You can test it by doing something a little more generic, like:

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

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

... then if that works, consider that it doesn't really make sense to do .html() on the same element in a loop, because each time .html() overwrites the entire content.

…然后，如果这样做有效，请考虑在循环中的同一元素上执行.html()并没有什么意义，因为每次.html()都会覆盖整个内容。

Use .append() instead if you're appending data from the loop:

使用.append()而不是从循环中添加数据:

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

#2

Wouldn't:

不会:

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

Really just need to be:

真的需要:

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

#3

If you define a variable within the click() method callback, you'll be able to reference it within your ajax success callback. Something similar to this should do you:

如果在click()方法回调中定义一个变量，就可以在ajax success回调中引用它。类似的事情应该让你:

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

#1