禁用 OnClick 事件，直到首先触发另一个事件答案

【问题标题】：Disable OnClick Event Until Another One Is Triggered First禁用 OnClick 事件，直到首先触发另一个事件
【发布时间】：2016-07-18 00:42:30
【问题描述】：

我有 6 个 div (.selector) 要做 (onclick)：

显示所有表格
显示 Nº1，隐藏其余部分
显示 Nº2，隐藏其余部分
...
显示 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');
});

【问题讨论】：

您能否创建一个工作 snippet，这样我们可以更轻松地为您提供帮助。
如果您不希望在单击两次时更改类，您真的只是要求addClass 而不是toggleClass 吗？
@MoshFeu 是的，抱歉，上次我遇到问题时，我将代码复制到了 jsfiddle.net，但这次我无法让它工作。下次我有问题时，我会确保创建一个这样更容易！ :)
@adeneo 这正是我想要做的，我会给下面提出相同建议的人提供正确答案，但也谢谢你！

标签： javascript jquery html css

【解决方案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');
});

【讨论】：

谢谢！正是我想要做的。尝试了两个选项和 0 个问题，但我可能会选择第二个。很高兴看到我可以保留所有旧代码并进行一些小的调整以使其正常工作，因为我仍在学习。
是的，出于性能原因，我推荐第二个。不客气，祝你好运。

【解决方案2】：

有两件事要做：

将 JavaScript 包装在一个函数中
每次点击某物时解除点击事件的绑定

方法如下：

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>

【讨论】：

接受了另一个正确的答案，因为我更容易理解他在做什么（仍在学习，所以我想尝试了解我的每一行代码的作用，而无需稍后寻求帮助） .但是感谢“包装 JavaScript”的建议，没想到这样做然后调用函数！

【解决方案3】：

你应该可以的

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

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

【讨论】：