Estoy tratando de intercambiar una imagen de logotipo SVG al hacer clic con Javascript. Mi guión se ve así:
document.querySelector('.logo').addEventListener('click', function() { document.querySelector('#logo-switch').src='logo-B.svg'; document.querySelector('#logo-switch').src='logo-A.svg'; }) La función funciona con el primer clic (cuando se elimina la tercera línea de código): document.querySelector('#logo-switch').src='logo-A.svg';
Sin embargo, me gustaría que volviera al src original cada vez que se hace clic en el logotipo; esto debería funcionar como una palanca.
¿Esto se hace con una declaración if? O como se logra esto?
Muchas gracias
Use una clase css adicional para el elemento .logo y alterne eso al hacer clic. El fragmento está usando la delegación de eventos para eso.
document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.classList.contains(`logo`)) { return evt.target.classList.toggle(`right`); } } .logo { width: 150px; height: 150px; display: inline-block; background: url(//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg) no-repeat; background-size: contain; cursor: pointer; } .right { background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1f/Skip_to_right3.svg); } <div class="logo"></div>Necesita verificaciones para ver qué logotipo es el actual y luego reemplazarlo por otro. También se puede hacer a través de operadores ternarios, pero if-else es más legible/comprensible para los humanos en este caso.
Como en OP describió, la función funciona bien con el primer clic, por lo que suponiendo que el controlador de clic funcione bien, aquí está la condición a continuación para agregar
document.querySelector('.logo').addEventListener('click', function() { if (document.querySelector('#logo-switch').src.indexOf('logo-A') != -1) { document.querySelector('#logo-switch').src = 'logo-B.svg'; } else { document.querySelector('#logo-switch').src = 'logo-A.svg'; } })¿Qué tal usar un cierre ?
document.querySelector('.logo').addEventListener( 'click', switchImage( document.querySelector('#logo-switch'), 'logo-B.svg', 'logo-A.svg' ) ); function switchImage (element, src1, src2) { var first = true; return function () { if (first) { element.src = src1; first = false; } else { element.src = src2; first = true; } } }EDITAR: usando el fragmento de @kooiinc
document.querySelector('.logo').addEventListener( 'click', switchImage( document.querySelector('#logo-switch'), '//upload.wikimedia.org/wikipedia/commons/1/1f/Skip_to_right3.svg', '//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg' ) ); function switchImage (element, src1, src2) { var first = true; return function () { if (first) { element.setAttribute('href', src1); first = false; } else { element.setAttribute('href', src2); first = true; } } } .logo, #logo-switch { width: 150px; height: 150px; display: inline-block; cursor: pointer; } <svg class="logo"> <image id="logo-switch" href="//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg"> </svg>