javascript - 如何将 jquery 解除绑定(bind)设置为切换

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

我不明白如何切换解除绑定(bind)语句。我尝试切换一个名为 inactive-leader 的类并将解除绑定(bind)应用到该类，但它不起作用。

基本上我想设置解除绑定(bind)

leader-pic-wrapper

谢谢

Answer 1

我的选择是以不同的观点来处理这个问题。如果没有绑定(bind)和取消绑定(bind)事件，则只需使用 :not() 排除第一个选择器的元素，并在您这样做时向要排除的元素添加一个类；请检查此代码段:

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