在Javascript中从SVG ID创建数组和子元素_Javascript_Arrays_Svg

在Javascript中从SVG ID创建数组和子元素

javascript arrays svg

在Javascript中从SVG ID创建数组和子元素,javascript,arrays,svg,Javascript,Arrays,Svg,我一直在将我在几个教程中找到的信息合并到尝试使用类切换SVG中某些吉他弦的颜色，以便单击的弦更改颜色，而其他弦返回默认颜色我基本上希望所有的字符串ID都是“menu1”的子元素。我相信如果我能做到这一点，该功能将工作。但是，到目前为止，我创建此“menu1”数组的尝试已失败。我认为我失败的关键是javascript中的第一行 <html> <head> <style> .class1{ stroke:#adad8b; } .cla

我一直在将我在几个教程中找到的信息合并到尝试使用类切换SVG中某些吉他弦的颜色，以便单击的弦更改颜色，而其他弦返回默认颜色

我基本上希望所有的字符串ID都是“menu1”的子元素。我相信如果我能做到这一点，该功能将工作。但是，到目前为止，我创建此“menu1”数组的尝试已失败。我认为我失败的关键是javascript中的第一行

<html>
<head>
  <style>   
    .class1{ stroke:#adad8b; }
    .class2{ stroke:#000000; }
  </style> 

  <script>
    var menu1 = document.getElementById("e-string b-string g-string d-string a-string e-low");

    function toggleClass(el) {
      var kids = document.getElementById('menu1').children;
      for (var i = 0; i < kids.length; i++) {
        kids[i].className = "class1";
      }
      el.className = "class2";
    }
  </script>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="1260" height="430" viewBox="-0.035 -0.048 1260.07 430.096"  xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="svgEditorBackground" x="-0.03500000014901161" y="-0.04800000414252281" width="1260.0699462890625" height="430.09600830078125" style="fill:none;stroke:none;" />
    <path fill="none" d="M0 0h1260v430H0z"/>
    <rect x="327.991" y="11.998" width="197" height="413" rx="0" ry="0" transform="matrix(.96783 0 0 1 10.227 0)" fill="#382b06" stroke="#000" />
    <rect x="326.016" y="12" width="196" height="8" ry="0" rx="0" transform="matrix(.9718 0 0 1 10.94 0)" fill="#f0eacb" stroke="#000" />
    <rect x="328.202" y="150.132" width="190.058" height="8.48" rx="0" transform="matrix(1.00738 0 0 .57778 -3.623 39.134)" ry="0" fill="#d1d1d1" />
    <rect x="328.275" y="332.785" width="190.058" height="8.48" rx="0" transform="matrix(1.00738 0 0 .57778 -3.623 39.134)" ry="0" fill="#d1d1d1" />
    <rect x="328.348" y="508.531" width="190.058" height="8.48" rx="0" transform="matrix(1.00738 0 0 .57778 -3.623 39.134)" ry="0" fill="#d1d1d1" />
    <circle cx="422.966" cy="283.61" r="12.014" stroke="#000" fill="#fafad2" />

    <!-- these are the concerned children -->
    <path id="e-string" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="2" d="M502.583,13.046v411.966" />
    <path id="b-string" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="2.5" d="M472.366,13.046v411.966" />
    <path id="g-string" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="3" d="M440.134,13.046v411.966" />
    <path id="d-string" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="3.3" d="M405.887,13.046v411.966" />
    <path id="a-string" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="3.5" d="M373.655,13.042v411.965" />
    <path id="e-low" class="class1" onclick="toggleClass(this)" fill="none" stroke-width="4" d="M341.423,13.046v411.966" />
  </svg>
</body>
</html>


.class1{stroke:#adad8b；}
.class2{stroke:#000000；}
var menu1=document.getElementById（“e-string b-string g-string d-string a-string e-low”）；
函数切换类（el）{
var kids=document.getElementById（'menu1'）.children；
for（var i=0；i


为了给你一个想法，我试着按照下面的脚本。但是，使用SVG会使事情变得复杂（至少对我来说是这样！）

.class1{浮点：左；边距：10px；背景：#09C；宽度：100px；高度：100px；光标：指针；}
.class2{浮点：左；边距：10px；背景：#0C0；宽度：100px；高度：100px；光标：指针；}
函数切换类（el）{
var kids=document.getElementById（'menu1'）.children；
for（var i=0；i
没有getElementsById（）
方法。它是getElementById（）
，只接受一个id值。你需要打六次电话
但实际上，您根本不需要调用该函数。见下文
另一个问题是SVG元素的className
属性与HTML元素上同名属性的工作方式不同。与其解释差异，不如简单地使用既适用于SVG又适用于HTML元素的setAttribute（）


功能切换类（el）{
//获取单击字符串的父元素，然后获取其第一个子元素
var kid=el.parentElement.firstElementChild；
//循环遍历所有子元素
while（kid！=null）{
//给孩子上课
setAttribute（“class”、“class1”）；
//接下一个孩子
kid=kid.nextElementSibling；
}
//最后在单击的元素上设置新类
el.setAttribute（“类别”、“类别2”）；
}
.class1{笔划：#adad8b；光标：指针；}
.class2{stroke:#000000；}

Hello Paul，谢谢你的回答，这样我能更好地理解这一点吗？在“el.parentElement.firstElementChild”中，文件中的哪个元素此时会被视为parentElement，哪个部分会被视为firstElementChild？我已经阅读了一些关于这方面的文档，但是在这个脚本的上下文中我很难理解它？谢谢parentElement将是
。firstElementChild将是
。这实际上是一个小错误。我将把路径打包成一个组，这样我们就不会在不必要的元素上循环。但是我忘了，我已经更新了答案parentElement
现在是
，而firstElementChild
现在是。谢谢Paul，这非常有帮助，我现在更了解它了。
<!DOCTYPE html>
<html>
<head>
  <style>
    .class1 { float:left; margin:10px; background:#09C; width:100px; height:100px; cursor:pointer; }
    .class2{ float:left; margin:10px; background:#0C0; width:100px; height:100px; cursor:pointer; }
  </style>

  <script>
    function toggleClass(el){
      var kids = document.getElementById('menu1').children;
      for (var i = 0; i < kids.length; i++) {
        kids[i].className = "class1";
      }
      el.className = "class2";
    }
  </script>
</head>

<body>
  <div id="menu1">
    <div class="class1" onclick="toggleClass(this)"></div>
    <div class="class1" onclick="toggleClass(this)"></div>
    <div class="class1" onclick="toggleClass(this)"></div>
    <div class="class1" onclick="toggleClass(this)"></div>
  </div>
</body>
</html>