jQuery toggle类|一次使用多个类中的一个-角度方式（不是重复）

我写了一个小方法来切换一个组中的一个CSS类。它一次只允许一个元素拥有该类。这些元素不是列表，也不一定有一个共同的父元素。唯一能将它们分组的是一个公共CSS类

我正在从事Angular 1.5项目，并试图让Angular按自己的方式完成工作。对于有棱角的恋人来说，有没有更好的方法来处理这个问题？所有文档示例要么使用一个元素，要么使用ngRepeat和$index

下面是一个与jQuery的toggleClass（）不同的示例

谢谢。：）

加价

<div class='thing'>one</div>
<div class='thing'>two</div>
<div class='thing'>three</div>
<div class='thing'>four</div>
<div class='thing'>five</div>

jQuery插件

$.fn.toggleBetween = function(className) {
    var $element = this;
    $element.on('click', function() {
        var $target = $(this);
        var currentlyActive = $target.hasClass(className);
        if ( currentlyActive ) {
            $target.removeClass(className);
        } else {
            $element.removeClass(className);
            $target.addClass(className);
        }
    });
    return this;
};

$('.thing').toggleBetween('active');

---

我可能会参加这里的活动

绑定单击，如果单击了不带类的元素，则在根范围中发出事件以关闭所有其他元素并开始列出该事件（因此，如果选择其他元素，则将取消选择自身）

注意。通常，您希望视图中的所有内容都具有模型。但是，如果您想要“所有元素无处不在”，您可以为所选元素存储什么？身份证件不 但如果此元素的类型是固定的，如您所做的：

{{person.name}

然后可以存储person.id并使用ng类。

---

这将迫使您在“顶级”thow上安装一些型号。

可能与@RandoHinn重复，谢谢。我已经准备好通过那篇文章了。我相信它仍然只在一个特定节点上切换类，而不考虑组中的其他元素。

$.fn.toggleBetween = function(className) {
    var $element = this;
    $element.on('click', function() {
        var $target = $(this);
        var currentlyActive = $target.hasClass(className);
        if ( currentlyActive ) {
            $target.removeClass(className);
        } else {
            $element.removeClass(className);
            $target.addClass(className);
        }
    });
    return this;
};

$('.thing').toggleBetween('active');

app.directive('toggleFamily', function($rootScope) {
  return {
    link: function(scope, elem, attrs) {
      function listen() {
        var bind = scope.$on('removeToggle', function(event) {
          elem.removeClass('toggled');
          bind();
        });
      }

      elem.bind('click', function() {
        if (elem.hasClass('toggled')) {
          elem.removeClass('toggled');
        } else {
          $rootScope.$broadcast('removeToggle');
          elem.addClass('toggled');
          listen();
        }
      });
    }
  };
});