Question

我有一个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解决方案，但我会对这两个选项感到满意。

Answer 1

而不是像getElementById那样使用querySelectorAll：

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

但我建议您使用class代替ID，因为至少在理论上，ID应该是唯一的。

删除类活动onclick（angularjs）

1 个答案: