javascript - 禁用 OnClick 事件，直到另一个事件先被触发

Question

我设置了 6 个 div (.selector) (onclick):

1. 显示所有表格
2. 显示第 1 位，隐藏其余部分
3. 显示 Nº2，隐藏其余部分
4. ...
5. 显示第 5 位，隐藏其余部分

他们还切换了一个改变背景颜色的类“activated”。

我想做的是，一旦我点击“Show Nº1, Hide rest” 禁用点击选项(在这个 div 上)，直到我先点击另一个像 “显示所有表” 或 “显示第 2 号表，隐藏其余表”。

类似于“once 函数”，但一旦另一个 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

如果您在点击函数中将 toggleClass 更改为 addClass。然后，在您的 .activated 中点击超过 1 次将无效(因为点击被禁用):

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