jQuery禁用锚标记并选择子元素？

Question

我很难弄明白这一点，所以也许有人可以帮助我。

这是我的html：

<p> 
post content 
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span> 
</p> 

<p> 
post #2 content 
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span> 
</p> 

而我的JS：

$(".voteUp").click(function(){ 
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){ 
     $("a span").html(data); 
    }); 
}); 

基本上就是我想要做的是与data包含的值更改内部跨度的价值。上面的代码确实有效，但它正在改变每个跨度的内容，而不仅仅是被点击的锚点的孩子。

我想要做的另一件事是在投票提交后禁用锚标记。

任何想法如何做到这一点？

Answer 1

尝试：

$(".voteUp").click(function(){ 
    var voteUp = $(this); 
    if(voteUp.hasClass('disabled'){ 
     // don't do anything, because it's disabled 
    } else{ 
     $.post(voteAction({postid: this.id, type: 'up'}), function(data){ 
      voteUp 
       .addClass('disabled') // add a class, which you can check on a click event fired 
       .find("span") 
       .html(data); 
     }); 
    } 
}); 

Answer 2

尝试

$(document).ready(function() { 

    $(".voteUp").click(function() { 

     $.post(voteAction({postid: this.id, type: 'up'}), function(data) { 

      $(this).children("span").html(data); 

     }); 

     $(this).unbind('click'); 
    }); 
}); 

Answer 3

请记住，从$。员额回调函数是异步的，所以你失去了你的情况下没有适当的框架。所以，这意味着你的$('a span')搜索整个DOM，因此它为什么要取代所有的东西。

编辑：好吧，SHEF是鸡蛋里挑骨头，但让我意识到，使用解除绑定（或SHEF的方法）仍不会在点击返回false，因此将有一个很好的“踢顶端”的效果，当你点击<a href="#">。此代码已更新以解决该问题。现在

$("a.voteUp").click(function(){ 
    //Set a local variable to the anchor that was clicked on for future use 
    var $this = $(this); 
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){ 
     $this.find("span").html(data); 

     //Unbind this "voteUp" button. This will remove the click handler and apply a class of "disabled" 
     $this.unbind('click').click(function() { return false }).addClass('disabled'); 
    }); 
    return false; 
}); 

，在你的CSS：

.disabled { color: #999; } 

这将使中的元素是 “禁用” 的文字是灰色的。

Answer 4

试试这个：

$(".voteUp").click(function(){ 
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){ 
     // Replace <span> that's a child of this: 
     $('span', this).html(data); 
     // Unbind click event from anchor: 
     $(this).unbind('click'); 
    }); 
}); 

如果你想删除的，而不是解除绑定click事件的锚标记，这样做：

$(this).parent().html($(this).html());