Question

我有多个span元素，我尝试删除类activeLang。我怎么能这样做？

<div class="header_content_lang">
    <span class="langNav">
        ...
    </span>
    <span class="langNav">
        ...
    </span>
    <span class="langNav activeLang">
        ...
    </span>
</div>

我尝试过这样做，就像建议的here：

一样

var x = document.getElementsByClassName(".activeLang");

[].forEach.call(x, function(el) {
    el.classList.remove(".activeLang");

});

console.log(x[0]);
console.log(x[1]);
console.log(x[2]);

但所有日志的输出都是“未定义的”。

Answer 1

在现代的最新浏览器上，您可以HTMLCollection NodeList返回的querySelectorAll（继承自document.querySelectorAll(".activeLang").forEach(function(element) { element.classList.remove("activeLang"); });）使用forEach：

if (!NodeList.prototype.forEach) {
    Object.defineProperty(NodeList.prototype, "forEach", {
        value: Array.prototype.forEach
    });
}

在旧浏览器上，您需要对其进行填充，您可以这样做：

classList

您可能还需要classList的填充。

在真正过时的浏览器（IE8）上，您必须先填充Array.prototype.forEach（和if ($parent) { $childnode = $pmasternode->add(navigation_get_string($menunode->get_text()), $url, navigation_node::TYPE_CUSTOM); $childnode->title($menunode->get_title());）。

或使用任何＆＃34;类似阵列＆＃34;循环机制描述in this answer。

Answer 2

从班级名称

中删除.

el.classList.remove("activeLang");

window.onload = function() {

  var x = document.getElementsByClassName("activeLang");
  console.log(x[0]); //will print the object
  [].forEach.call(x, function(el) {
    el.classList.remove("activeLang");
  });
  console.log(x[0]); //will no longer print the object
};

<div class="header_content_lang">
  <span class="langNav">
        ...
    </span>
  <span class="langNav">
        ...
    </span>
  <span class="langNav activeLang">
        ...
    </span>
</div>

Answer 3

您的代码中存在一些拼写错误：您在类<xsl:value-of select="."/>的名称中添加了一个点，并且没有必要（在activeLang和getElementsByClassName中）。< / p>

假设你修正了拼写错误，你的remove仍然未定义。原因是由于两件事：

列表的长度最多为1（这可以解释为什么x [1]和x [2]为console.log）。
undefined返回已找到元素的实时getElementsByClassName，因此，即使列表在执行删除类之前有一个元素，实际删除它时长度也为零（因此x [ 0]也是HTMLCollection。

希望这能澄清事情。

从没有jquery

3 个答案: