Javascript使一个函数只能工作一次

Question

我正在做一个博客主题，在那里你可以喜欢主题页上的帖子。它使用下面的javascript通过tumblr API来喜欢帖子，将白色的心形改为红色的心形，并将+1更改为帖子注释计数，显示在like按钮的上方。它工作得很好，但我的问题是，当你点击心形按钮时，它会变成红色，就像帖子一样，注释计数为+1，但一旦它被喜欢了，你就可以继续单击该按钮，它会一直在注释计数上加1。有没有人能帮我把它变成一个只工作一次的函数，例如:有人点击心形按钮，它变成红色，在音符计数上加一，然后就完成了。

$(function() {    
        $('.likepost').live('click', function() {
            var post = $(this).closest('article');
            var id = post.attr('id');
            var oauth = post.attr('rel').slice(-8);
            var count = parseInt($("#note_count_"+ id).text());
            var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
            $('#like-it').attr('src', like);
            $(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
            $("#note_count_"+ id).text(count+1);
            return false;
        });
    });

顺便说一句，它在http://blog.jamescharless.com/上工作。您必须登录到tumblr才能使脚本工作。

Answer 1

$("body").one("click", ".likepost", function() {
//your code here
});

通过使用.one()函数，您只允许单击被触发一次。这在某种程度上就是它设计的目的。理想情况下，您会希望使用.likepost的父对象而不是body，但最糟糕的情况是，您可以只使用body作为父对象。

Answer 2

你可以点击事件unbind。

$(function() {    
        $('.likepost').live('click', function() {
            var post = $(this).closest('article');
            var id = post.attr('id');
            var oauth = post.attr('rel').slice(-8);
            var count = parseInt($("#note_count_"+ id).text());
            var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
            $('#like-it').attr('src', like);
            $(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
            $("#note_count_"+ id).text(count+1);

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

            return false;
      });
});