3

所以我想做的有点像 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 方法？

谢谢你

4

6 回答 6

3

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

您可以使用live()注册一个事件处理程序，该处理程序仅在元素仍与初始选择器匹配时才被调用：

$(".voteUp").live("click", function() {
    // Your event handler.
});
于 2011-06-29T15:15:12.440 回答
0

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

$(this).unbind('click');
于 2011-06-29T15:16:50.057 回答
0

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

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

如果您想切换课程，可能只需切换“votedUp”，而不是“voteUp votedUp”。如果您有一个分配给“voteUp”的点击事件，只需在切换中添加“votedUp”就不会删除该点击绑定。

于 2011-06-29T15:17:21.507 回答
0

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

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

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

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

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

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

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

于 2011-06-29T15:18:43.820 回答
0

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

在这种情况下，您可能希望.unbind()在单击事件后使用该方法取消绑定单击事件$(this).unbind('click');

或者

使用只允许单击元素一次的.one() 方法。

$('.voteUp').one('click', function() {...
于 2011-06-29T15:23:25.847 回答
0

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

<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');
于 2011-06-29T15:36:45.507 回答