jquery：选择与单击的类相同的项目答案

【问题标题】：jquery: Selecting items with the same class as clickedjquery：选择与单击的类相同的项目
【发布时间】：2021-12-06 15:42:16
【问题描述】：

我有一个大圆圈连接到小方块的 SVG。圆圈有 A、B、C 等类别，正方形有相应的类别，尽管有些类别不止一个。我需要一种方法来单击一个圆圈并向包含该类的所有元素添加一个类。相反，我还需要能够单击一个正方形，并让它向与类数组匹配的所有圆圈添加一个类。我敢肯定这很容易，尽管我担心我没有足够的经验来解决这个问题。这是我目前所拥有的。

// 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');
        }
   })
});

编辑 --

它是否有可能在 SVG 加载之前触发？我已经更新了我的代码，但它不能在生产环境中工作。

$( '.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' );
                }
            } );
        }
    });

【问题讨论】：

请同时包含标记。
“并为包含该类的所有元素添加一个类”如果您的圆形和正方形包含多个类，您如何选择与其他圆形和正方形匹配的类？此匹配是“全部”还是“任何”匹配？
@Sean 这是一个复杂的 SVG，所以我不想发布整个标记，但圆圈只有一个类，正方形有一个或多个。如果单击 A 圆圈，则所有 B 方块都应添加一个类。如果单击 ABC 方块，则 A、B 和 C 圆圈应添加一个类。
请参阅minimal reproducible example。 minimal 标记的概念，足够能够帮助您。也许一个带有 2 个圆圈和 3 个正方形的 svg（每个圆圈 1 个，两个圆圈 1 个）就足够了。
单击圆圈时，前两条路径应处于活动状态。或者，如果单击前两个路径中的任何一个，则该圆圈应处于活动状态。 <ellipse class="a" cx="467.9" cy="3860.8" rx="81.2" ry="81.2"/> <path class="a" d=""/> <path class="a b" d=""/> <path class="b c" d=""/>

标签： javascript jquery class svg click

【解决方案1】：

我不清楚你想要达到什么目标。但是这里我在<svg> 上有一个事件监听器。 1) 单击时，所有“活动”类名都将被删除。 2) 对于被点击元素的每个类名，将具有该类名的元素的类列表更新为“active”。

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="a b" d="M 0 0 L 0 1 L 1 1 L 1 0 Z"/>
  <path transform="translate(4 0)" class="b c" d="M 0 0 L 0 1 L 1 1 L 1 0 Z"/>
</svg>

【讨论】：