Tengo el siguiente html con tres puntos suspensivos idénticos. El archivo style.css define los estilos clave no seleccionada y unselected-key selected-key . Usando JavaScript/CSS puro, quiero lograr que cuando se haga clic en una elipse, su estilo cambie de clave no seleccionada a unselected-key selected-key y cada otra elipse obtenga el estilo unselected-key . La solución debería adaptarse fácilmente al caso de una gran cantidad de puntos suspensivos en la imagen svg.
<!DOCTYPE html> <html> <head> <title>Experiment</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Major keys</h1> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <g id="g-14" class="unselected-key"> <ellipse cx="346.176" cy="15.569" rx="22.2" ry="22.2" /> <text x="346.176" y="15.569">1</text> </g> <g id="g-15" class="unselected-key"> <ellipse cx="451.176" cy="43.704" rx="22.2" ry="22.2" /> <text x="451.176" y="43.704">2</text> </g> <g id="g-16" class="unselected-key"> <ellipse cx="528.041" cy="120.569" rx="22.2" ry="22.2" /> <text x="528.041" y="120.569">3</text> </g> </svg> </body> </html>Sin ninguna broma: como llamaste a esto "Experimento", yo mismo hice un experimento. Puse su HTML en VSCode y le pedí a Github Copilot que hiciera lo siguiente:
// agregue un oyente a las elipses svg para que cuando se haga clic en una elipse, la clase de la elipse cambie a clave seleccionada y todas las demás elipses cambien a clave no seleccionada. Si la elipse ya está seleccionada, la clase no cambia a clave no seleccionada.
Escupió esto:
var svg = document.querySelector('svg'); svg.addEventListener('click', function(e) { if (e.target.tagName === 'ellipse') { var selectedKey = e.target.parentNode; var unselectedKeys = document.querySelectorAll('g:not(#' + selectedKey.id + ')'); for (var i = 0; i < unselectedKeys.length; i++) { unselectedKeys[i].classList.remove('selected-key'); unselectedKeys[i].classList.add('unselected-key'); } selectedKey.classList.remove('unselected-key'); selectedKey.classList.add('selected-key'); } });¿Qué debería decir? Para mí funciona. Probablemente estoy asado por esto, pero lo encontré lo suficientemente divertido como para publicarlo.