禁用OnClick事件，直到另一个被触发为止

Question

我有6个div（.selector）设置为（onclick）：

1. 显示所有表格
2. 显示Nº1，隐藏休息
3. 显示Nº2，隐藏休息
4. ...
5. 显示Nº5，隐藏休息

他们还切换了改变背景颜色的班级"activated"。

我想要做的是，一旦我点击“显示Nº1，隐藏休息”禁用点击选项（在此div上），直到我点击另一个像 “显示所有表格”或“显示Nº2，隐藏休息”。

像“once function”之类的东西，但是一旦另一个div被激活就会重置。有什么办法吗？



这是我的 CSS

.selector {
  height: 25px;
  width: 25px;
  background-color: #702C3D;
  margin-left: 2px;
  margin-right: 2px;
  float: left;
  cursor: pointer;
}

.selector.activated {
  background-color: #000000;
}

这是我的 JavaScript

$('.selector').on('click', function(event) {
  $('.selector').not(this).removeClass('activated');
  $(this).toggleClass('activated');
});

Answer 1

有两件事要做：

1. 将JavaScript包装在函数
中
2. 每次点击某些内容时取消绑定点击事件

以下是：

function clickEvent(elements){
  elements.bind('click', function(event) {
    $('.selector').not(this).removeClass('activated');
    $(this).toggleClass('activated');
    $('.selector').unbind('click');
    clickEvent($('.selector').not(this));
  });
}
clickEvent($('.selector'));

.selector {
   height: 25px;
   width: 25px;

   background-color: #702C3D;
   color: #FFF; //for display purposes

   margin-left: 2px;
   margin-right: 2px;

   float: left;

   cursor: pointer;
}

.selector.activated {
   background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>

Answer 2

如果您在点击功能中将toggleClass更改为addClass。然后，.activated中的多次点击将无效（因为点击已停用）：

$('.selector').on('click', function(event) {
  $('.selector').not(this).removeClass('activated');
  $(this).addClass('activated');
});

或者，您可以检查点击的.selector是否有.activated类，如：

$('.selector').on('click', function(event) {
  if($(this).is('.activated')) return;
  $('.selector').not(this).removeClass('activated');
  $(this).toggleClass('activated');
});

Answer 3

你应该能够做到

if($(this).hasClass('activated'))
    return; 

如果已经全部激活，则跳过它。