如何设置jquery解除绑定为切换
How to set jquery unbind as toggle
以下是我的脚本,用于在单击 div 时显示和隐藏内容。
我还想禁用其他 div 元素,直到再次单击第一个 div。
$('.leader-pic-wrapper').click(function(){
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
$('.leader-pic-overlay').toggle();
$('.leader-pic-wrapper').not(this).toggleClass('inactive-leader');
/*$(".inactive-leader").unbind("click");*/
$(".inactive-leader").off("click");
$(this).next('.leader-profile-wrapper').css('top', bottom);
$(this).next('.leader-profile-wrapper').toggle();
});
我不明白如何切换解除绑定语句。我尝试切换一个名为 inactive-leader 的 class 并应用解除绑定到那个 class,但它不起作用。
基本上我想在
上设置解除绑定
leader-pic-wrapper
谢谢
我的选择是以不同的观点来处理这个问题。如果没有绑定和取消绑定事件,则只需使用 :not()
排除第一个选择器的项目,并在您这样做时向要排除的元素添加 class ;请检查此代码段:
$('body').on('click', '.box:not(".disabled")', function() {
if ($('.disabled').length) {
$(this).siblings().removeClass('disabled')
$(this).animate({
'width': '80px'
}, 300)
} else {
$(this).siblings().addClass('disabled')
$(this).animate({
'width': '160px'
}, 300)
}
})
.box {
display: inline-block;
height: 80px;
width: 80px;
background: tomato;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
您的代码逻辑如下所示:
//Delegate the event since we are add/remove the class
//Target the elements that aren't inactive
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() {
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
//Check if exists some inactive elements to handle 1/2 click
if ($('.inactive-leader').length) {
//Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup
$(this).siblings().removeClass('inactive-leader')
//...ACTIONS - This will act as the second click
} else {
$(this).siblings().addClass('inactive-leader')
//...ACTIONS - This will act as the first click
}
});
以下是我的脚本,用于在单击 div 时显示和隐藏内容。 我还想禁用其他 div 元素,直到再次单击第一个 div。
$('.leader-pic-wrapper').click(function(){
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
$('.leader-pic-overlay').toggle();
$('.leader-pic-wrapper').not(this).toggleClass('inactive-leader');
/*$(".inactive-leader").unbind("click");*/
$(".inactive-leader").off("click");
$(this).next('.leader-profile-wrapper').css('top', bottom);
$(this).next('.leader-profile-wrapper').toggle();
});
我不明白如何切换解除绑定语句。我尝试切换一个名为 inactive-leader 的 class 并应用解除绑定到那个 class,但它不起作用。
基本上我想在
上设置解除绑定leader-pic-wrapper
谢谢
我的选择是以不同的观点来处理这个问题。如果没有绑定和取消绑定事件,则只需使用 :not()
排除第一个选择器的项目,并在您这样做时向要排除的元素添加 class ;请检查此代码段:
$('body').on('click', '.box:not(".disabled")', function() {
if ($('.disabled').length) {
$(this).siblings().removeClass('disabled')
$(this).animate({
'width': '80px'
}, 300)
} else {
$(this).siblings().addClass('disabled')
$(this).animate({
'width': '160px'
}, 300)
}
})
.box {
display: inline-block;
height: 80px;
width: 80px;
background: tomato;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
您的代码逻辑如下所示:
//Delegate the event since we are add/remove the class
//Target the elements that aren't inactive
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() {
var $el = $(this);
var bottom = $el.position().top + ($el.outerHeight(true) - 30);
//Check if exists some inactive elements to handle 1/2 click
if ($('.inactive-leader').length) {
//Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup
$(this).siblings().removeClass('inactive-leader')
//...ACTIONS - This will act as the second click
} else {
$(this).siblings().addClass('inactive-leader')
//...ACTIONS - This will act as the first click
}
});