0
93
VistasAlternar botón SVG
Estoy tratando de alternar un botón SVG de un estado a otro. Son dos SVG separados contenidos en un SVG más grande.
Como referencia he adjuntado estas imágenes aquí:
Hasta ahora, se me ocurrió esto en el que, al hacer clic, cambio el valor de ID de la visualización, activado o desactivado, como se muestra a continuación. Estoy seguro de que hay una forma mucho más limpia de hacer esto usando jQuery.
El código HTML SVG era demasiado largo, así que lo agregué a pastebin
Código 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"); });2 Respuestas
Responde la pregunta0
Si está utilizando svg en línea como dice, puede alternar la identificación a la que se hace referencia en el svg.
$(".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>0
Puede usar el operadorstartwith para el selector de jQuery, extraer el número y el tipo de la identificación y aplicarlo en sus selectores adicionales:
$('[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(); } });Disculpe por no crear un fragmento, stackoverflow.com dijo que sería demasiado largo.
JSFiddle: https://jsfiddle.net/tygkjLvf/