javascript - 如何将类添加到 svg 路径？

Question

首先，我检查单击的按钮父级是否具有给定路径的相同类，然后如果路径类与单击的父级按钮类匹配，它应该向路径本身添加一个类。

<ul>
  <li class="modern">
   <button>Ex 1</button>
  </li>
  <li class="classic">
   <button>Ex 2</button>
  </li>
<ul>

<svg>
  <path class="modern"></path>
  <path class="classic"></path>
</svg>

$("button").on("click", function() {
    var periodClass = $(this).parent().attr("class");
    $("svg path").each(function() {
        $("svg path").not('.'+periodClass).removeClass("active");
        $('svg path.'+periodClass).target.classList.add('active');
    });
});

也试过

$('svg path.'+periodClass).addClass('active');

Answer 1

使用查询选择器或查看: JQuery can't add a class to an SVG

$("button").on("click", function(e) {
  var periodClass = $(this).parent().attr("class");
  var paths = document.querySelectorAll("path");
  var pathToActive =  document.querySelector("path."+periodClass);
  for (var i=0;i<paths.length;i++) {
   paths[i].classList.remove("active");
  }
  pathToActive.classList.add('active');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="modern">
   <button>Ex 1</button>
  </li>
  <li class="classic">
   <button>Ex 2</button>
  </li>
<ul>

<svg>
  <path class="modern"></path>
  <path class="classic"></path>
</svg>