javascript - 如何使用 javascript 保存类列表以便稍后将它们与其他类进行比较？

Question

我有一系列多边形:

<svg>
   <path class="_1600 _1500 _1400 leaflet"></path>
   <path class="_1300 _1700 _1900 leaflet"></path>
   <path class="_1600 _1400 _1800 leaflet"></path>
</svg>

和按钮:

<button class="_1600 _1500"></button>
<button class="_1600 _1300 _1200"></button>
<button class="_1300 _1200 _1700 _1800"></button>    
<button class="_1300 _1200 _1100 _1900"></button>

我需要在单击时为其分配一个类，这就是我的做法并且工作正常:

点击时:

    this.getElement().classList.add("active");

现在多边形变成:

<svg>
   <path class="_1600 _1500 _1400 leaflet"></path>
   <path class="active _1300 _1700 _1900 leaflet"></path>
   <path class="_1600 _1400 _1800 leaflet"></path>
</svg>

如何保存被单击元素的类列表(单击后我还向其中添加了 .active)？ 我想保存它们，以便稍后可以将此列表与另一个类列表进行比较，如果有任何匹配，则将 .active 类附加到匹配元素。

我必须使用:

function onEachFeature(feature, layer) {
    layer.on({
        click: panelShow
    });
}

function panelShow(e) {
    $("path").removeClass("active");
    this.getElement().classList.add('active');
}

Answer 1

您可以使用className获取包含所有类的空格分隔字符串。

this.getElement().className;

如果您想要一些更奇特的东西，例如静态 classList 副本，您始终可以创建一个虚拟元素:

function staticClassListCopy(element) {
  var dummy = document.createElement('div');
  dummy.className = element.className; // import classes
  return dummy.classList;
}

该对象将是一个类似数组的对象，因此您可以轻松地迭代它以进行所需的比较。