Question

以下是我在点击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();
});

我不明白如何切换unbind语句。我尝试切换一个名为inactive-leader的类并将unbind应用于该类，但它无效。

基本上我想在

上设置解除绑定

leader-pic-wrapper

由于

Answer 1

我的选择是以不同的视角来解决这个问题。如果没有绑定和取消绑定，事件只会使用:not()使用第一个选择器排除项目，并且正在为要排除的元素添加一个类;请查看此代码段：

＆＃13;

$('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)
  }
})

＆＃13;

.box {
  display: inline-block;
  height: 80px;
  width: 80px;
  background: tomato;
  margin: 5px;
}

＆＃13;

<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>

＆＃13;

您的代码上的这个逻辑将如下所示：

//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
  }
});

如何设置jquery unbind作为切换

1 个答案: