我正在嘗試將 SVG 按鈕從一種狀態切換到另一種狀態。它們是包含在一個更大的 SVG 中的兩個獨立的 SVG。
作為參考，我在這里附上了這些圖片：
到目前為止，我已經提出了這個方法，onclick 我將 ID 值從顯示更改為打開或關閉，如下所示。我確定使用 jQuery 有更簡潔的方法來做到這一點？
HTML SVG 代碼太長了，所以我添加到了 pastebin
https://pastebin.com/qnEDLthz
JS代碼
$( "#off-btn-nav-01-category" ).on( "click", function() {
$("#off-btn-nav-01-category").css("display", "none");
$("#on-btn-nav-01-category").css("display", "block");
});
$( "#on-btn-nav-01-category" ).on( "click", function() {
$("#on-btn-nav-01-category").css("display", "none");
$("#off-btn-nav-01-category").css("display", "block");
});
uj5u.com熱心網友回復：
您可以對 jQuery 選擇器使用 startswith 運算子，從 id 中挖掘數字和型別并將其應用到您的其他選擇器中：
$('[id^="off-btn-nav"], [id^="on-btn-nav"]').click(function() {
let idParts = this.id.split("-");
let number = idParts[idParts.length - 2];
if (idParts[0] === "on") {
$(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
$(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
} else {
$(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
$(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
}
});
請原諒我沒有創建一個片段，stackoverflow.com 說它太長了。
JSFiddle：https ://jsfiddle.net/tygkjLvf/
uj5u.com熱心網友回復：
如果您像您說的那樣使用行內 svg，那么您可以切換 svg 中參考的 id。
$(".Icon use").on("click", function() {
if ($(this).attr("href") === "#Icon-On") {
$(this).attr("href", "#Icon-Off");
} else {
$(this).attr("href", "#Icon-On");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="Icon-On" viewBox="0 0 1024 1024">
<path class="Path1" d="M512 32l-480 480h288v512h384v-512h288z" />
</symbol>
<symbol id="Icon-Off" viewBox="0 0 1024 1024">
<path class="Path1" d="M864 128l-480 480-224-224-160 160 384 384 640-640z" />
</symbol>
</svg>
</div>
<svg class="Icon"><use href="#Icon-Off" /></svg>
<svg class="Icon"><use href="#Icon-Off" /></svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/448320.html
標籤：javascript html jQuery css svg