2

カウントを更新するために.load関数でjQueryを使用していますが、ボタンが非常に速くクリックされると、ハッキングされる可能性があります。また、最初のクリック後にボタンが使用できなくなるため、バインド解除を使用できません。

これが、ボタンがクリックされたときに使用するjQueryです。

<script type="text/javascript">
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

クリックが速すぎる、またはその逆の場合、ロードは複数回実行されます。また、バインド解除は役に立たないことも説明しました。

何か案が？

アップデート

私がそれを正しく行っているかどうかはわかりませんが、私の場合は解決しているようです..誰かが私を修正/間違ったものにすることはできますか？

この行をクリックハンドラーに追加しました

// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

ロードしたスクリプトadd_post_likeとremove_post_likeにこの行を追加しました。

$('.bubble a').show();

今ではワンクリックで対応できるようです。信頼できますか？

4

5 に答える 5

2

ボタンがクリックされたときに無効にし、トグルのように他のボタンがクリックされたときに有効にすることができます。たとえば、いいねがクリックされたときに無効にして有効にします。

于 2012-05-17T16:46:53.620 に答える
2

one()機能が思い浮かびます。

http://api.jquery.com/one/

于 2012-05-17T16:47:08.810 に答える
2

ボタンがロードプロセスの最後までクリックされるたびに、クリックイベントを無効にすることができます。次に、コールバック関数内で完了した後にイベントをアクティブにします。

詳細: http://api.jquery.com/load/

アップデート：

簡単な例を用意しました: http://jsfiddle.net/hvfc5/1/

ボタンをクリックすると、まずボタンのイベント バインドが削除され、イメージが読み込まれた後に再度バインドされます。しかし、この後でもう一度クリックすると、イベントのバインドを解除することはできますが、元に戻ることはありません。画像が読み込まれているため、load() 関数はトリガーされません。

これは操作方法を理解するための単なるデモ サンプルです。必要に応じて独自のバージョンをカスタマイズする必要があります。

于 2012-05-17T16:50:10.197 に答える
1

はい：ボタンクリックの最初のアクションは、ボタン自体を無効にすることです。そうすれば、高速クリックはできなくなります。もちろん、ロード後にボタンを再度有効にする必要があります。

アップデート

ため息...それはすべてcodezについてですよね？

$(".bubble-like a").click(function() {
    $(".bubble-like a").attr('disabled', 'disabled');
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, 
                            function(){
                              $(".bubble-like a").removeAttr('disabled');
                            });
});
于 2012-05-17T16:46:30.600 に答える
0 
 $(".bubble-like a").click(function() {
  var button = $(this);
   $(this).wrap($('<button/>', {
                                "class" : "disButton",
                                 disabled: true,
                                 width: button.width()
                               }
                   )); // wrap the anchor with button with disabled property
  ...
  ..
  $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() {
    button.unwrap(); // remove the wrapping button
  });
});

ボタンを単純なテキストのように見せるには、いくつかの css を修正する必要があります。例えば、

button.disButton {
  border: none;
  background: transparent;
}

button.disButton a{
  color: #ddd;
  text-decoration: none;
}
于 2012-05-17T16:50:04.157 に答える