Jquery add html() für einzelne Elemente

Question

Ich lade ein Ajax-Loader-Gif, wenn eine Abstimmungsschaltfläche geklickt wird. Das Bild erscheint jedoch für alle Elemente. Ich versuche herauszufinden, wie man das Bild nur für den Gegenstand, den ich gewählt habe, lädt. Das ist mein Code.

$(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 Probe

<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

aus der HTML-Probe, es sieht aus wie die Elemente Geschwister sind so sollten Sie

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

um das Bild zu zeigen.

in den Erfolg Rückruf verwenden

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

die spezifische gestimmt Element Ziel.

Answer 2

versuchen

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

Answer 3

Unter der Annahme, .ajax_load ein Kind der Abstimmung ist, dann können Sie dies ändern:

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

zu:

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

Das wird nur die .ajax_load, die ein Kind der Abstimmung ist, die angeklickt wurde, und nicht alle von ihnen.

Das gleiche in Ihrem Ajax Anruf. Ich glaube, $(this) sollte sich immer noch auf die angeklickte "Abstimmung" beziehen.

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

Wird ...

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

bearbeiten Okay, da html, es gibt ein paar Möglichkeiten, dies zu tun. Ich würde es auf diese Weise wahrscheinlich tun:

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

Im Allgemeinen, wenn Sie versuchen, herauszufinden, wie ein div mit JQuery zu wählen, ein großartiger Ort zu suchen ist die JQuery Dokumentation für traversing und selecting.

Answer 4

Ich nehme an, dass es mehrere Elemente mit der Klasse ajax_load gibt. Sie müssen sie irgendwie eindeutig identifizieren. Werfen Sie einen Blick auf die Erklärungen in diesen Fragen:

• How to show a hidden div on mouse over on a series of images
• jquery individual mouseenter for elements