JavaScript:管理一个从一个实例到下一个实例的点击

Question

我对javascript非常新。

我正在尝试编写这个婴儿jQuery插件，我将用来列出下拉列表。我无法实现的目标（除了我没有注意到的事情之外）是在我单击另一个实例时整洁退出或停用我的活动实例。我试图在以下小提琴中说明我的问题（保持我正在使用的结构）：https://jsfiddle.net/andinse/m0kwfj9d/23/

JavaScript的样子：

$(document).ready(function() {
  $.fn.activator = function() {
    var Activator = function(el) {
      this.html = $('html');
      this.el = el;
      this.is_active = false;
      this.initialize();
    };
    Activator.prototype.initialize = function() {
      var self = this;
      self.el.on('click', function(e) {
        if (self.is_active === false) {
          self.toggle('activate');
        } else {
          self.toggle('deactivate');
        }
        });
    };
    Activator.prototype.toggle = function(action) {
      var self = this;
        if (action === 'activate') {
        console.log('activating ' + self.el[0].className);
                self.is_active = true;
        self.el.addClass('red');
                self.html.on('click', function(e) {
          if (e.target != self.el[0]) {
            self.toggle('deactivate');
          }
        });
      }
            if (action === 'deactivate') {
        console.log('deactivating ' + self.el[0].className);
        self.is_active = false;
        self.el.removeClass('red');
        self.html.off('click');
            }
    };
    if (typeof this !== 'undefined') {
      var activator = new Activator(this);
    }
    return this;
    };
  $('.a').activator();
  $('.b').activator();
  $('.c').activator();
});

我的想法是：

• 在实例处于活动状态后，请立即注意HTML的点击（因此可以停用）。单击时，检查event.target是否与活动实例相同。如果没有，请停用此实例。
• 一旦实例不活动，就停止观看点击。这样我们就不会做不必要的工作。

当这样设置这样的设置时，它似乎仅适用于一个周期（单击激活A然后单击B激活B并停用A然后单击C激活C，但不会停用B）。

如果我摆脱了" self.html.off（'click'）"，"似乎可以正常工作，但是如果我查看日志，我可以看到" toggle"函数，有时每次点击多次触发。必须有一种更干净的方式。

任何帮助都非常感谢。

Answer 1

使用您的逻辑，单击任何元素时，应停用任何当前激活元素。要么在全球上进行：

$('.your_activation_class').removeClass('.your_activation_class');

或某些父范围

$('some_parent_selector .your_activation_class').removeClass('.your_activation_class');