在Javascript中將onclick功能從元素轉移到按鈕

Question

當這些元素被單擊時，此代碼將更改svg中的元素顏色（吉他字符串），並確保未單擊的所有其他字符串恢復為或保留默認顏色（class1）。

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

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

<script>
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;
  }
  // Set the new class on the clicked element
  el.setAttribute("class", "class2");
}
</script>

我現在想在頁面上添加六個針對吉他弦的按鈕，以便具有相同的功能，但是用戶需要按相應的按鈕，而不是吉他弦本身。 因此，例如，按鈕將被添加到頁面中，如下所示：

<button type="button">E-String</button>
<button type="button">B-String</button>
<button type="button">G-String</button>
<button type="button">D-String</button>
<button type="button">A-String</button>
<button type="button">E-Low</button>

如何添加toggleClass函數，以便將直接單擊字符串時當前存在的功能轉移到按鈕上？ 即，當單擊按鈕時，相應的字符串將更改顏色，而所有其他字符串將保持默認顏色。

我已經嘗試過類似的嘗試，在此嘗試定位字符串ID，但它什么也沒做。

<button type="button" onclick="toggleClass(e-string)" >E-String</button>

Answer 1

您需要了解的第一件事是，我們無法使用“描邊”更改HTML按鈕元素的顏色。 您應該對按鈕使用'background-color'屬性

您可以使用Jquery輕松做到這一點

我創建了兩個CSS樣式來更改顏色：btn-class1和btn-class2

 /*Javascript code */ $('.class1').on('click', function (){ $('.class1 ').attr('class', 'class1'); $(this).attr("class", 'class2'); }); $("button").on("click", function (){ $('button').attr('class', 'btn-class1'); $(this).attr("class", 'btn-class2'); }); 

 /* Css style for svg */ .class1{ stroke:#adad8b; } .class2{ stroke:#000000; } /*css style for buttons */ .btn-class1 { background-color: #adad8b; } .btn-class2 { background-color: #000000;color:white } 

 <!-- I presume you have included Jquery like this --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg> <g> <path class="class1" id="e-string" fill="none" stroke-width="2" d="M502.583,13.046v411.966" /> <path class="class1" id="b-string" fill="none" stroke-width="2.5" d="M472.366,13.046v411.966"/> <path class="class1" id="g-string" fill="none" stroke-width="3" d="M440.134,13.046v411.966"/> <path class="class1" id="d-string" fill="none" stroke-width="3.3" d="M405.887,13.046v411.966"/> <path class="class1" id="a-string" fill="none" stroke-width="3.5" d="M373.655,13.042v411.965"/> <path class="class1" id="e-low" fill="none" stroke-width="4" d="M341.423,13.046v411.966"/> </g> </svg> <button type="button">E-String</button> <button type="button">B-String</button> <button type="button">G-String</button> <button type="button">D-String</button> <button type="button">A-String</button> <button type="button">E-Low</button>