我正在尝试将 SVG 按钮从一种状态切换到另一种状态。它们是包含在一个更大的 SVG 中的两个独立的 SVG。
作为参考,我在这里附上了这些图片:
到目前为止,我已经提出了这个方法,onclick 我将 ID 值从显示更改为打开或关闭,如下所示。我确定使用 jQuery 有更简洁的方法来做到这一点?
HTML SVG 代码太长了,所以我添加到了 pastebin
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");
});
您可以对 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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句