Jquery добавить HTML () для отдельных элементов

Question

Я загружаю gif-загрузчик ajax при каждом нажатии кнопки голосования. Изображение, однако, отображается для всех элементов. Я пытаюсь выяснить, как загрузить изображение только для того элемента, за который я проголосовал. Это мой код

$(document).ready(function(){
    $(".vote").click(function(e) {
       $('.ajax_load').html('<img src="/images/ajax-loader.gif" />');
       var item_id = $(this).attr("id");
       var dataString = 'item_id=' + item_id;

    $.ajax({
        type: "POST",
        url: "vote.php",
        data: dataString,  
        cache: false,
        success: function(html) {
     $('.ajax_load').html('Voted!');
        }
    });
    return false;
});
});

Пример HTML

<div class="vote" id=88">Vote</div> <div class="ajax_load">
<div class="vote" id=92">Vote</div> <div class="ajax_load">
<div class="vote" id=38">Vote</div> <div class="ajax_load">

Answer 1

Из примера html, похоже, что элементы являются братьями и сестрами, поэтому вы должны использовать

$(this).nextAll('.ajax_load:first').html('<img src="/images/ajax-loader.gif" />');

чтобы показать изображение.

при успешном использовании обратного вызова

$('#' + item_id).nextAll('.ajax_load:first').html('Voted!');

, чтобы нацелиться на определенный проголосовавший элемент.

Answer 2

Предполагая, что .ajax_load является дочерним элементом голосования, вы можете изменить это:

$('.ajax_load').html('<img src="/images/ajax-loader.gif" />');

на:

   $(this).find('.ajax_load').html('<img src="/images/ajax-loader.gif" />');

Это повлияет только на .ajax_load, который является дочерним элементомголосов, которые были нажаты, и не все из них.

То же самое в вашем вызове ajax.Я полагаю, что $(this) все равно должен ссылаться на нажатие "голосования".

$('.ajax_load').html('Voted!');

Становится ...

$(this).find('.ajax_load').html('Voted!');

edit Хорошо, учитывая, что HTML,Есть несколько способов сделать это.Я, вероятно, сделал бы это следующим образом:

$(this).next('.ajax_load:first')...  <- do whatever you'll do with the selection.

Как правило, если вы пытаетесь выяснить, как выбрать div с помощью JQuery, отличное место для поиска - документация Jquery для traversing и выбор .

Answer 3

Полагаю, есть несколько элементов, имеющих класс ajax_load.Вам нужно как-то идентифицировать их однозначно.Взгляните на объяснения в этих вопросах:

• Как показать скрытый div при наведении курсора на серию изображений
• jquery индивидуальныймышиный центр для элементов

Answer 4

1001 * попробовать *

  $("vote").click(function(e) {
   $(this).html(...);