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;
}

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

Answer 2

工作代码：

var buttons = [].slice.call(document.querySelectorAll('.buttons button'));

function panelShow(e) {
  $("path").removeClass("active");
  var clickedPath = this.getElement();
  clickedPath.classList.add("active");
  var datum = (clickedPath.getAttribute('class').match(/\d+/g) || [])[0];
  buttons.forEach(function(btn) {
    var method = btn.getAttribute('data-date') === datum ? 'add' : 'remove';
    btn.classList[method]('active');
  });
}

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

2 个答案: