SVG 按钮切换

我正在尝试将 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");
});
拉霍斯阿帕德

您可以对 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章