Javascript使一个函数只工作一次

Question

我正在开发一个博客主题，您可以在其中喜欢主题页面中的帖子。它使用以下 javascript 通过 tumblr API 点赞帖子，将白心更改为红心，并将帖子注释计数 +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 的父级而不是主体，但最坏的情况是您可以只使用主体作为父级。

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;
      });
});