jquery为单个元素添加html（）

Question

每当点击一个投票按钮时，我正在加载一个ajax-loader gif。但图像显示所有项目。我正试图找出如何为投票的项目加载图片。这是我的代码。

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

尝试

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

Answer 3

假设.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!'); 

编辑好了，因为HTML，有几个方法可以做到这一点。我可能会做这种方式：

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

一般来说，如果你想弄清楚如何使用jQuery选择一个div，一个伟大的地方看是traversing和selecting jQuery的文档。

Answer 4

我想有几个元素的类ajax_load。你需要以某种方式唯一地识别它们。看一看解释这些问题：

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