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类。你需要以某种方式识别它们。看看这些问题中的解释：

Jquery为各个元素添加html（）

4 个答案: