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的父级，但最坏的情况是您可以使用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;
      });
});

Javascript使一个函数只工作一次

2 个答案: