在JavaScript中从SVG ID创建数组及子元素的实现问题

嘿，我明白你想实现的功能——点击SVG里的吉他弦让它单独变色，其他弦回到默认状态。你提到创建menu1数组存储弦ID时出了问题，大概率是DOM加载时机不对，或者元素选择的方式有疏漏。我给你一套完整的可运行方案，你可以参考调整：

1. 先准备带唯一标识的SVG结构 #

确保每根吉他弦都有唯一ID，同时统一添加一个通用类方便批量选择：

<svg width="400" height="200" viewBox="0 0 400 200">
  <!-- 6根吉他弦，带唯一ID和通用类 -->
  <line id="string1" class="guitar-string" x1="50" y1="40" x2="350" y2="40" stroke-width="2"/>
  <line id="string2" class="guitar-string" x1="50" y1="60" x2="350" y2="60" stroke-width="2"/>
  <line id="string3" class="guitar-string" x1="50" y1="80" x2="350" y2="80" stroke-width="2"/>
  <line id="string4" class="guitar-string" x1="50" y1="100" x2="350" y2="100" stroke-width="2"/>
  <line id="string5" class="guitar-string" x1="50" y1="120" x2="350" y2="120" stroke-width="2"/>
  <line id="string6" class="guitar-string" x1="50" y1="140" x2="350" y2="140" stroke-width="2"/>
</svg>

2. 定义默认与高亮样式 #

用CSS类来控制弦的颜色，方便后续通过类切换实现变色：

.guitar-string {
  stroke: #666; /* 默认灰色 */
  transition: stroke 0.2s ease; /* 颜色切换时的平滑过渡 */
}

.guitar-string.active {
  stroke: #e74c3c; /* 高亮红色，可自行替换成你想要的颜色 */
}

3. JavaScript核心逻辑（解决menu1数组问题） #

这里的关键是等DOM完全加载后再获取元素，否则会因为SVG还没渲染导致数组为空。两种实现方式供你选：

// 等DOM所有元素加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 方式1：直接通过类选择器获取所有弦元素，存入menu1（推荐，更简洁）
  const menu1 = document.querySelectorAll('.guitar-string');
  
  // 方式2：如果你坚持用ID数组，先定义ID列表再批量获取元素
  // const stringIds = ['string1', 'string2', 'string3', 'string4', 'string5', 'string6'];
  // const menu1 = stringIds.map(id => document.getElementById(id));

  // 给每根弦绑定点击事件
  menu1.forEach(string => {
    string.addEventListener('click', function() {
      // 第一步：移除所有弦的高亮类，恢复默认
      menu1.forEach(s => s.classList.remove('active'));
      // 第二步：给当前点击的弦添加高亮类
      this.classList.add('active');
    });
  });
});

你之前可能踩的坑 #

• DOM加载时机错误：如果你的JS代码放在<head>里，还没等SVG渲染就执行，querySelectorAll或getElementById会返回空数组，导致menu1无效。解决办法是把JS放在SVG后面，或者用DOMContentLoaded包裹代码。
• ID拼写不一致：检查SVG里的弦ID和你数组中写的是否完全匹配，大小写、字符都不能错。
• 选择器错误：如果用类选择器，要确保所有弦都添加了对应的通用类（比如示例中的guitar-string）。

这样就能实现你想要的效果：点击任意一根弦，它会切换到高亮色，其余弦自动恢复默认颜色。

内容的提问来源于stack exchange，提问作者treetop