将类添加到 id 与另一个元素的类匹配的元素答案

【问题标题】：Add class to element whose id matches the class of another element将类添加到 id 与另一个元素的类匹配的元素
【发布时间】：2019-10-01 21:03:42
【问题描述】：

我想获取元素的第二个类，然后将一个类添加到具有该 ID 的元素。在 Chrome、Firefox 等中它可以完美运行，但在 IE11 中却不行。你知道为什么吗？请帮帮我

for (var i = 0; i < $('#example .item').length; i++) {
  var class_svg = document.getElementsByClassName("item")[i].className.split(' ')[1];
  var $elem = document.getElementById(class_svg);  
  $elem.classList.add("show");
}

【问题讨论】：

检查 IE11 中的控制台，它很可能会给你一个错误，你可以用它来调试。
IE11 仅部分支持classList API，因为我看到class_svg，我认为这是因为：“不支持 SVG 上的 classList 或MathML 元素。”

标签： javascript jquery for-loop

【解决方案1】：

根据the docs classList 在 Edge 之前仅部分支持。使用className 代替：

$elem.className += ' show';

编辑：感谢@Sterling Archer 的提示

【讨论】：

请注意，它是部分支持，而不是“不支持”

【解决方案2】：

使用 SVG 元素创建一个基本示例（我假设您已根据您的示例代码）并在 IE11 和 Edge 中查看它，您可以看到 className 属性是 [object SVGAnimatedString]。那是 SVG 元素的一些特殊对象，而不是处理那个特殊对象，让我们只使用 getAttribute 处理属性本身。以下是适用于大多数浏览器的代码：

for (var i = 0; i < $('#example .item').length; i++) {
  var class_svg = document.getElementsByClassName("item")[i].getAttribute("class").split(' ')[1];
  var $elem = document.getElementById(class_svg); 
  var classList = $elem.getAttribute("class");
  classList += " show";
  $elem.setAttribute("class",classList);
}

希望对你有用。

【讨论】：