编程语言
首页 > 编程语言> > javascript – 禁用jQuery函数onClick然后启用函数

javascript – 禁用jQuery函数onClick然后启用函数

作者:互联网

我在我的网站上使用了三个jQuery函数.

在我的function.js文件中,我还使用document.ready来调用我的函数.

这是我的jQuery代码:

$(document).ready(function() {
    bottom_cartouche();
    pre_scroll_cartouche_top();
    pre_scroll_cartouche_bottom();
});

function pre_scroll_cartouche_top() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- TOP ---------------------------------------------------*/

    $('.cartouche_top').on("mouseenter", function() {
        $('.cartouche_top').stop().animate({
            top: -$('.cartouche_top').height() + $('.cartouche_fixed').height()
        });

        $('.archives_open').on('click', function() {
            $('.cartouche_top').stop().animate({
                top: '0px'
            }, function() {
                $('.cartouche_fixed').addClass('active');
            });
            $('.archive_close').css('opacity', '1');
        });

        $('.archive_close').on('click', function() {
            $('.archive_close').css('opacity', '0');

            $('.cartouche_fixed').removeClass('active');

            $('.cartouche_top').stop().animate({
                top: cartouche_top_position
            });
        });
    });

    $('.cartouche_top').on("mouseleave", function() {
        $('.cartouche_fixed').removeClass('active');
        $('.cartouche_top').stop().animate({
            top: cartouche_top_position
        });
    });
}

function pre_scroll_cartouche_bottom() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- BOTTOM ---------------------------------------------------*/

    $('.cartouche_bottom').on("mouseenter", function() {
        $('.layout_bottom').slideUp();

        $('.cartouche_bottom').stop().animate({
            top: $(window).height() / 1.5
        });
    });

    $('.cartouche_bottom').on("mouseleave", function() {
        $('.layout_bottom').slideDown();

        $('.cartouche_bottom').stop().css('position', 'fixed').animate({
            top: cartouche_bottom_position
        });
        $('.cartouche_bottom_inside').removeClass('active');
        $('.bottom_close').hide();
    });
}

function bottom_cartouche() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e) {
        e.preventDefault();

        if (!$(this).is('.active')) {
            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({
                'position': 'absolute',
                'cursor': 'text',
                'left': '0'
            }).animate({
                top: $(".top_table").height();
            });

            $('.bottom_close').show();
            $(this).addClass('active');
        }
    });

    $('.bottom_close').click(function() {
        $('.cartouche_bottom').css({
            'position': 'fixed',
            'cursor': 'context-menu'
        }).animate({
            top: cartouche_bottom_position
        }, function() {
            $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();
    });
}

我想要做的是在我的第三个函数中添加开/关动作(函数bottom_cartouche()).

我想,当“$(‘.cartouche_bottom_inside’).on(‘click’,function(e){”
禁用函数pre_scroll_cartouche_top()和pre_scroll_cartouche_bottom()

当“$(‘.bottom_close’).单击(function(){”再次启用2个函数时.

我尝试使用on / off,绑定和取消绑定,但我找不到让它工作的方法.

这是我尝试过的:

    function bottom_cartouche(){

        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e){

        e.preventDefault();

        if( !$(this).is('.active') ){

// DISABLE //

    $('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom());

// END DISABLE //

            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({

            top :$(".top_table").height();

            });

            $('.bottom_close').show();

            $(this).addClass('active');

        }

    });

    $('.bottom_close').click(function(){

// ENABLE //

    $('.cartouche_top').on('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').on('mouseleave',pre_scroll_cartouche_bottom()); 

// END ENABLE //

        $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({

            top : cartouche_bottom_position

            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();

    });

    }

尝试禁用时,仅禁用第一个功能,再次启用,它根本不起作用…

任何人都可以帮我吗?

解决方法:

我找到了一个使用if语句和2个变量的不同方法的解决方案(flag_top& flag_bottom)
.
这是我的代码,也许它可以帮助:

function pre_scroll_cartouche_top(){


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_top = 0;
        /*----------------------------- TOP ---------------------------------------------------*/

        $('.cartouche_top').on("mouseenter", function(){
            if(flag_top==0){
                $('.cartouche_top').stop().animate({top : -$('.cartouche_top').height()+$('.cartouche_fixed').height()});

                $('.archives_open').on('click', function(){
                    flag_top = 1;

                    $('.cartouche_top').stop().animate({top : '0px'},function(){

                        $('.cartouche_fixed').addClass('active');

                    });

                    $('.archive_close').css('opacity','1');

                });

                $('.archive_close, .index_tableau a').on('click', function(){
                    flag_top = 0;
                    $('.archive_close').css('opacity','0');

                    $('.cartouche_fixed').removeClass('active');

                    $('.cartouche_top').stop().animate({top : cartouche_top_position});


                });
            }
        });

        $('.cartouche_top').on("mouseleave", function() {
            if(flag_top==0){
                    $('.cartouche_fixed').removeClass('active');
                    $('.cartouche_top').stop().animate({top : cartouche_top_position});
            }

        });
    }

    function bottom_cartouche(){

        /*----------------------------- PRE SCROLL BOTTOM ---------------------------------------------------*/


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_bottom = 0;
        /*----------------------------- MOUSEENTER ---------------------------------------------------*/


        $('.cartouche_bottom').on("mouseenter", function(){
            if(flag_bottom==0) {
                        $('.layout_bottom').slideUp();

            $('.cartouche_bottom').stop().animate({top :$(window).height()/1.5});
    }
        });

        /*----------------------------- MOUSELEAVE ---------------------------------------------------*/

        $('.cartouche_bottom').on("mouseleave", function(){
            if(flag_bottom==0) {
            $('.layout_bottom').slideDown();

            $('.cartouche_bottom').stop().css('position','fixed').animate({
                top :cartouche_bottom_position
            });
            $('.cartouche_bottom_inside').removeClass('active');
                $('.bottom_close').hide();

}

        });


        /*----------------------------- OUVERTURE BOTTOM ---------------------------------------------------*/

        $('.cartouche_bottom_inside').on('click', function(e){
            e.preventDefault();
            if( !$(this).is('.active') ){
                            flag_bottom=1;

                $('.layout_bottom').slideUp();
                //$('.slideshow').css('position','initial');
                $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({
                top :$(".top_table").height(),
                });


                $('.bottom_close').show();
                if ($('.cartouche_bottom_inside').height() < $(window).height() ) {
            }
                $(this).addClass('active');

            }
        });

        /*----------------------------- FERMETURE BOTTOM ---------------------------------------------------*/

        $('.bottom_close').click(function(){
            flag_bottom=0;

            $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({
            top : cartouche_bottom_position
            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });
            $('.bottom_close').hide();

                    //$('.slideshow').css('position','relative');

                        $('.layout_bottom').slideDown();


        });

}

标签:jquery,javascript,function,handler,unbind
来源: https://codeday.me/bug/20190703/1362135.html