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

请记住，$ .post中的回调函数是异步的，因此如果没有正确的框架，您将丢失上下文。因此，这意味着您的$('a span')会搜索整个DOM，因此它会替换所有内容。

编辑：好吧，Shef正在分裂头发，但让我意识到使用unbind（或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());

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

4 个答案: