Javascript заставляет функцию работать только один раз

Я работаю над темой блога, где вы можете лайкать сообщения со страницы темы. Он использует следующий javascript, чтобы понравиться сообщению с помощью API tumblr, изменить белое сердце на красное сердце, а также +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, чтобы скрипт работал.


javascript jquery tumblr
person James Charless Dickinson    schedule 24.08.2012    source источник
comment
Я думаю, проблема здесь не в том, что он работает более одного раза, а в том, что он не связан с учетной записью tumblr. В противном случае пользователь может просто обновить страницу и лайкнуть ее второй раз.   -  person Zhihao    schedule 24.08.2012
comment
@canon – прочитайте api.jquery.com/one   -  person j08691    schedule 24.08.2012

Ответы (2)


arrow_upward
4
arrow_downward 

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

Используя функцию .one(), вы разрешаете нажатие только один раз. Это то, для чего он был разработан. В идеале вы хотели бы использовать родителя .likepost ближе к нему, чем к телу, но в худшем случае вы могли бы просто использовать тело в качестве родителя.

person j08691    schedule 24.08.2012

arrow_upward
1
arrow_downward

Вы можете отменить событие клика.

$(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;
      });
});
person 3on    schedule 24.08.2012
comment
Как бы я это сделал? Я вообще не очень хорошо разбираюсь в javascript. - person James Charless Dickinson; 24.08.2012
comment
@Zhihao Ваша теория частично верна, я думаю, на самом деле невозможно сказать, нравится ли пользователю пост или нет. Но работает не раз.. - person James Charless Dickinson; 24.08.2012
comment
Именно так. Не бойтесь читать документацию по jQuery. Он полон примеров. - person 3on; 24.08.2012
comment
@JamesCharless Извините, я переместил свой комментарий к вопросу, поскольку он не относился к этому ответу. У меня нет опыта работы с tumblr или API, но разве они не предоставляют метод, чтобы лайкать что-то как пользователь (и возвращать индикатор успеха) или иным образом получать количество лайков? То есть, если предположить, что аналогичная функция предоставляется tumblr. Чтобы было ясно, я имею в виду запрос AJAX, а не что-то, сделанное исключительно на стороне клиента. - person Zhihao; 24.08.2012