13

アンカータグ<a class="next">next</a>を「ボタン」にしました。表示する新しいものがない場合は、このタグを非表示にする必要がある場合があります。ボタンを.hide()で非表示にし、.show()で再表示すれば、すべて正常に機能します。しかし、代わりに.fadeIn()と.fadeOut()を使用したかったのです。

私が抱えている問題は、fadeOutアニメーション中にユーザーがボタンをクリックすると、ショーを実行しているロジックに問題が発生する可能性があることです。私が見つけた解決策は、元のクリック機能の開始後にボタンからクリックイベントのバインドを解除し、アニメーションの完了後に再バインドすることでした。

$('a.next').click(function() {
    $(this).unbind('click');
    ...
    // calls some functions, one of which fades out the a.next if needed
    ...
   $(this).bind('click');
}

上記の例の最後の部分は機能しません。クリックイベントは実際にはアンカーに再バインドされません。誰かがこれを達成するための正しい方法を知っていますか?

私は独学のjqueryの人なので、unbind()やbind()のような高レベルのもののいくつかは頭に浮かび、jqueryのドキュメントは私が理解できるほど単純ではありません。

4

3 に答える 3

15

最初にアニメーション化されているかどうかを確認するためのチェックを追加します。

$('a.next').click(function() {
    if (!$(this).is(":animated")) {
        // do stuff
    }
});
于 2010-04-07T14:21:46.453 に答える
6

クリックイベントを再バインドすると、最初からやり直すことになります。イベントを処理する予定の関数を提供する必要があります。「バインド解除」を呼び出した後、jQueryはそれらを記憶しません。

この特定のケースでは、もう少し複雑です。問題は、これらのアニメーションを起動すると、タイマーによって駆動される一連のアクションを開始することです。したがって、クリックハンドラー自体の内部にある「クリック」ハンドラーのバインドを解除して再バインドしても、実際には何の役にも立ちません。(トリックの問題を解決したくないと仮定して)役立つのは、ハンドラーis(":animated")のバインドを解除してから、アニメーションからの「終了」コールバックで再バインドすることです。

最初に「クリック」ハンドラーを設定すると、関数の宣言を「click()」の呼び出しから分離できます。

var handler = function() {
  $(this).whatever();
};
$('a.next').click(handler);

次に、バインド解除/再バインドが必要になった場合は、その呼び出しを繰り返して「クリック」し、同じ方法で「ハンドラー」関数を参照できます。

于 2010-04-07T14:53:56.523 に答える
3

よりシンプルで短いソリューション

(bind / unbindメソッドを使用せずに)

バインドを解除する場合はオブジェクトにクラスを追加し、このクラスを削除してexを再バインドします。

$('#button').click( function(){
   if($(this).hasClass('unbinded')) return;
   //Do somthing
 });

$('#toggle').click(function(){
    $('#button').toggleClass('unbinded');
 });
于 2016-01-07T22:07:37.920 に答える