Возникли проблемы с голосами jquery, такими же, как у стека overoverflow?

Question

У меня есть этот код jquery с запросом ajax, который работает нормально, но jquery не отображает результаты (voice_count) и изменяет изображение upvote, так же как stackru:

JQuery код:

$(function(){
    $("a.vote_up").click(function(){
    //get the id
    the_id = $(this).attr('id');

    //the main ajax request
    $.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "ajax/votes.php",
        success: function(msg)
        {
            //echo the votes count
            $("span#votes_count"+the_id).html(msg);
            //replace the new vote count
            $("span#votes_count"+the_id).fadeIn();
            //replace the image with active arrow
            $("#vote_up"+the_id).attr("src", "img/upvoteActive.png");

        }
    });
});

HTML-код:

<li class ="record">
<span class="vote_count">$net_vote</span> 

  <a href='#' class='vote_up' id=$id><img src="img/uparrow.png"></a>

  <a href='#' class='vote_down' id=$id><img src="img/downarrow.png"></a>
</li>

Чтобы еще раз все прояснить, запрос ajax в порядке, он выдает правильный ответ, проблема в бите успеха ajax, новый счетчик голосов не отображается, и изображение не заменяется активной стрелкой (как в стеке). цветочек) спасибо:))

Answer 1

Ваши селекторы в success обратный вызов все не так. У тебя есть <span class="vote_count">...</span> но затем попытайтесь обновить его значение, как если бы оно имело идентификатор: $("span#votes_count"+the_id)...

Вы, вероятно, хотите, чтобы ваш код больше походил на:

success: function(msg) {
  //echo the votes count
  $("span.vote_count#"+the_id).html(msg);
  //replace the new vote count
  $("span.vote_count#"+the_id).fadeIn();
  //replace the image with active arrow
  $(".vote_up#"+the_id).attr("src", "img/upvoteActive.png");
}

Итак, как вы можете видеть, вы также хотите добавить идентификатор объекта в .vote_count элемент, а также.

Обновление:

Чтобы быть более понятным, вот обновленная разметка:

<span class="vote_count" id="$id">$net_vote</span> 
<a href='#' class='vote_up' id="$id"><img src="img/uparrow.png" /></a>
<a href='#' class='vote_down' id="$id"><img src="img/downarrow.png" /></a>

И вот обновленный JavaScript:

$(document).ready( function() {
  $("a.vote_up").click(function(){
    //get the id
    var the_id = $(this).attr('id');

    //the main ajax request
    $.ajax( {
      type: "POST",
      data: "action=vote_up&id=" + the_id,
      url: "ajax/votes.php",
      success: function( msg ) {
        $("span.vote_count#"+the_id).html(msg).fadeIn();
        $(".vote_up#" + the_id + " img").attr("src", "img/upvoteActive.png");
      }
    } );
  } );
} );

Answer 2

В вашем коде JQuery вы используете #votes_count но HTML не имеет идентификатора, но vote_count класс (без с).

Так что следует читать span.vote_count

то же самое с upvote, вы используете идентификатор для цели, но у него есть класс..

Answer 3

Вы неправильно настроили таргетинг на промежутки, а также отправили параметры get поверх почтового запроса. Я исправил ниже:

 $(function(){
        $("a.vote_up").click(function(){
        //get the id
        the_id = $(this).attr('id');

    //the main ajax request
            $.ajax({
                type: "POST",
                data: {'action' : 'vote_up','id' : $(this).attr("id")} // here
                url: "ajax/votes.php",
                success: function(msg)
                {
                                    //echo the votes count
                    $("span.vote_count").html(msg); //here
                    //replace the new vote count
                    $("span.vote_count").fadeIn(); // here
                    //replace the image with active arrow
                               $(".vote_up").find(the_id).attr("src", "img/upvoteActive.png"); // and here

                }
            });
        });