Tengo un SVG con círculos grandes conectados a cuadrados pequeños. Los círculos tienen clases A, B, C, etc. y los cuadrados tienen clases correspondientes, aunque algunos tienen más de una. Necesito una forma de hacer clic en un círculo y agregar una clase a todos los elementos que contienen esa clase. Por el contrario, también necesito poder hacer clic en un cuadrado y hacer que agregue una clase a todos los círculos que coincidan con la matriz de clases. Estoy seguro de que esto es fácil, aunque me temo que no tengo la experiencia suficiente para haberlo descubierto. Esto es lo que tengo hasta ahora.
// Click on circle to highlight boxes and connected lines $('body').on('click','circle, ellipse, .program',function() { var className = $(this).attr('class'); var classArr = className.split(/\s+/); $("svg circle, svg path, svg ellipse").each(function() { var indvClass = $(this).attr('class'); if ($.inArray(indvClass, classArr) !== -1 || $(this).hasClass('active')) { $(this).toggleClass('active'); $(this).closest('.line').toggleClass('active'); } }) });EDITAR --
¿Es posible que se dispare antes de que se cargue el SVG? He actualizado mi código, pero no funciona en producción.
$( '.mapsvg-wrap' ).find( 'circle, ellipse, path' ).click( function() { var isActive = $( this ).hasClass( 'active' ); var classList = $( this ).attr( 'class' ).split( /\s+/ ); $( '.active' ).removeClass( 'active' ); if ( ! isActive ) { $.each( classList, function( index, className ) { if ( 'active' != className ) { $( '.' + className ).addClass( 'active' ); } else { $( '.active' ).removeClass( 'active' ); } } ); } });No me queda claro exactamente lo que le gustaría lograr. Pero aquí tengo un detector de eventos en <svg> . 1) Cuando se hace clic, se eliminan todos los nombres de clase "activos". 2) para cada uno de los nombres de clase del elemento en el que se hizo clic, actualice la lista de clase de los elementos con ese nombre de clase con "activo".
document.addEventListener('DOMContentLoaded', e => { // eventlistener for click document.querySelector('svg').addEventListener('click', e => { // remove all class names "active" document.querySelectorAll(`svg .active`).forEach(elm => elm.classList.remove('active')); // for each of the class names for the clicked element e.target.classList.forEach(cl => { // add "active" to all elements with that class name document.querySelectorAll(`svg .${cl}`).forEach(elm => elm.classList.add('active')); }); }); }); .active { fill: red; } <svg viewBox="0 0 10 10" width="200" xmlns="http://www.w3.org/2000/svg"> <ellipse class="a" cx="2" cy="5" rx="2" ry="4"/> <ellipse class="b" cx="5" cy="5" rx="2" ry="4"/> <path class="a" d="M 0 0 L 0 1 L 1 1 L 1 0 Z"/> <path transform="translate(2 0)" class="ab" d="M 0 0 L 0 1 L 1 1 L 1 0 Z"/> <path transform="translate(4 0)" class="bc" d="M 0 0 L 0 1 L 1 1 L 1 0 Z"/> </svg>