JQuery AJAX ссылается на $ (this) в функции успеха

Question

У меня есть система голосования, которая отправляет идентификатор выбранного элемента в скрипт 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);
                }
            }
    });
});

Поэтому, когда я создаю элемент в первую очередь, я беру идентификатор записи в базе данных и устанавливаю его как идентификатор элемента.Так что я пытаюсь сделать ссылку на точный элемент, который был нажат, и установить его 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);
}

Answer 2

Не будет:

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

На самом деле просто нужно быть:

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

Answer 3

Если вы определите переменную в обратном вызове метода 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);
            }
        }
    });
});