jquery - jqueryクリックイベントを最初のクリックでのみ発生させる方法

Question

2つのdiv（.basic1と.basic2）があります。クリック時に.basic1をフェードアウトさせ、すばらしい作業を行っている.basic2をフェードアウトさせたい。唯一の問題は、.basic2がフェードインした後、ユーザーがリンク（.navbar1）をクリックし続けると、このdivが何度もフェードインすることです。.bind（）関数を使用する必要があることはわかっていますが、コードのどこに配置するかがわかりません。ありがとう！

$(document).ready(function() {
    $('.navbar1').click(function(e){
        e.preventDefault();

        $('.basic2').hide().load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 1

使用.one()：

$('.navbar1').one('click', function(e) {

トリガーすると、clickイベントのバインドが解除されます。

要素をダブルクリックしたくない場合は、次のように機能するはずです。

$(document).on('click', '.navbar1:not(.clicked)', function() {
    // ...
});

クリックできないようにする.navbar1には、を実行します$('.navbar1').addClass('clicked')。クリック可能にするには、反対の操作を行います。

Answer 2

one()ワンタイム イベント ハンドラについては、 jQuery を参照してください。すなわち

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();

        $('.basic2').hide().load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 3

jQuery は、まさにこのための.one()メソッドを提供します。

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();
        $('.basic2').hide() 
        .load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});