JQuery 在同一类的 .click() 中使用toggleClass() 似乎不起作用

Question

所以我想做的有点像 youtube 上使用 jquery 的竖起大拇指/大拇指朝下投票系统，这意味着一旦用户投票，两个 div（图像，不管是什么）都将变得不可用于该特定邮政。

到目前为止，为了做到这一点，我使用了 .click() ，其中toggleClass() 将更改其自己的类，如果我检查 DOM，我可以看到该类发生更改，但为什么 .click() 仍在工作新班级？

//TO BE CALLED WHEN USER CLICKS VOTE FORGIVENESS
$('.voteUp').click(function() {
    var id = $(this).closest("article").attr("id");

    //Make it impossible to vote again
    $(this).toggleClass('voteUp votedUp');
    $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');

});

我的 html (php)

        <article class='yellowSheet' id='57'>
            <div class="title">
                <h1>StuffUp says :</h1>
                <p class="story">What happened ?</p>
            </div>

            <div class="entryContent">
                <p>guy, 2011-06-28 17:11:48</p>
            </div>

            <div class="voting">
                <img class="voteUp" src="images/thumbsUp.png" /></div>
                <img class="voteDown" src="images/thumbsDown.png" /></div>
            <div class="storyBottom"></div>

        </article>

我不明白的是为什么在切换类之后，我仍然可以单击新类“votedDown”，因为该类没有 .click 方法？

谢谢

Answer 1

我实际上会删除 voteUp 并添加 votedUp。

$(this).removeClass('voteUp').addClass('votedUp');

如果你想切换一个类，可能只需切换“votedUp”，而不是“voteUp votedUp”。如果您将点击事件分配给“voteUp”，只需在切换按钮中添加“votedUp”并不会删除该点击绑定。

Answer 2

.click 将事件处理程序绑定到“运行时”与您的选择器匹配的所有实体 - 因此尽管删除了该类，实体仍然绑定了单击事件。

您可以做两件事之一。要么使用：

$('.voteUp').live('click', function() { 
    // etc 
} ); 

“live”的行为方式与您期望的“单击”方式相同，并且仅当您单击与其选择器匹配的内容时才激活 - 并且每次您单击时它都会对此进行分析。

或者您可以在事件处理程序中手动取消绑定事件，例如：

$('.voteUp').bind('click.voteUp', function(e) { 
    $(this).unbind('click.voteUp'); 
   // and the rest of what you want to do; 
});

第二个示例还使用命名空间事件处理程序，这是 jquery 中的一个巧妙功能，这意味着只有您命名的事件处理程序将被删除。

Answer 3

不确定此时是否重要，但是您有一个额外的“”，我重新格式化了您必须使问题更清楚的内容：

<div class="voting">
    <img class="voteUp" src="images/thumbsUp.png" />
</div> <!-- Extra close div -->
    <img class="voteDown" src="images/thumbsDown.png" />
</div>

所以我不认为 find()在此语句中将匹配任何内容：

 $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');

Answer 4

它实际上绑定到元素而不是类。类名仅用于初始查找。

在这种情况下，您可能需要使用 .unbind() 方法在点击事件后解除绑定 $(this).unbind('click');

或者

使用 .one() 方法 ，该方法只允许元素被点击一次。

$('.voteUp').one('click', function() {...

Answer 5

类名只是您用来匹配元素的方法：click 处理程序在元素本身上注册，并且无论它是否仍然公开该类都会被调用。

您可以使用 live() 注册一个事件处理程序，仅当元素仍然与初始选择器：

$(".voteUp").live("click", function() {
    // Your event handler.
});

Answer 6

您已经将单击事件绑定到该对象。您无法删除该类并期望单击事件随之而来。你想要的就是这样称呼：

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