删除类活动onclick（angularjs）

Posted 2021-04-14

我有一个ul，里面最多可能有3个li（意思是它可以有1,2或3个）。所有3，当点击时，打开一个模态并得到一个class="active"。

我的目标是在使用右上角的X按钮关闭模态时删除该类。

这是ul中代码的一部分：

    {% for key, data in resources %}
        <li{% if loop.first %} ng-class="class" {% verbatim %}{{class}}{% endverbatim %} {% endif %} id="icon-resource">
            <a
                data-toggle="tab"
                href="#{{ key }}"
                segment-event="Modules: Tutor: Clicked {{ key|capitalize }} Section"
                segment-not-track-if-class="active"
                onclick="openAssistance()"
                ng-click="changeClass()"
            >
                <i class="icon-{{ key }} icon-sm"></i>
                <span class="sr-only">{{ ('resources.tabs.' ~ key ~ '.title') | trans }}</span>
            </a>
        </li>
    {% endfor %}

这是X按钮：

  <button type="button" class="close" toggle-class="oc-open" onclick="closeAssistance()" aria-hidden="true">&times;</button>

这是关闭模态并删除active类的js：

function openAssistance() {
  var x = document.getElementById('assistance');
  if (x.style.display === "none") {
      x.style.display = "block";
  }
}

function closeAssistance() {
  var x = document.getElementById('assistance');
  if (x.style.display === "block") {
      x.style.display = "none";
  }
  document.getElementById("icon-resource").classList.remove('active');
}

问题是：它只删除第一个图标的active类，这意味着如果关闭模式，第二个或第三个图标处于活动状态，它将保持活动状态。

我希望有一个angularjs解决方案，而不是像我一样纯粹的js，但我会对任何一种选择感到满意。

答案

而不是getElementById像这样使用querySelectorAll：

document.querySelectorAll("#icon-resource").forEach(function (li) {
    li.classList.remove("active");
});

但我建议你使用class而不是ID，因为至少在理论上，IDs应该是唯一的。