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