我一直在合并我在几个教程中找到的信息 尝试使用类来切换SVG中某些吉他弦的颜色，以便单击的字符串改变颜色，其他字符串返回默认颜色。
我基本上希望所有字符串ID都是＆＃39; menu1＆＃39;的子元素。我相信如果我能做到这一点，功能将起作用。但是，我试图创建这个菜单1＆＃39;到目前为止阵列都失败了。我认为我失败的关键是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>
为了给你一个想法，我试着按照下面的脚本。但是，这使我使用SVG （至少对我而言）的事情变得复杂。
<!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>
答案 0 :(得分：1)
没有getElementsById()方法。它是getElementById()，只需要一个id值。你需要六次打电话。
但实际上，你根本不需要调用该功能。见下文。
另一个问题是SVG元素的className属性与HTML元素上的同名属性的工作方式不同。不是解释差异，而是使用适用于SVG和HTML元素的setAttribute()可能更容易。
function toggleClass(el) {
// Get the parent element of the clicked string, and then its first child element
var kid = el.parentElement.firstElementChild;
// Loop through all the child elements
while (kid != null) {
// Set theis child's class
kid.setAttribute("class", "class1");
// Get the next child
kid = kid.nextElementSibling;
}
// Finally set the new class on the clicked element
el.setAttribute("class", "class2");
}.class1{ stroke:#adad8b; cursor: pointer;}
.class2{ stroke:#000000; }<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"/>
<g>
<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"/>
</g>
</svg>