Javascript 如何将类添加到svg路径？

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

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

---

Jquery无法向svg添加类，因此必须使用该属性

另外，您不需要each循环，因为您已经知道每个路径上都有一个特定的类。因此，您可以：

$("button").on("click", function() {
    var periodClass = $(this).parent().attr("class")

    //here you use .attr and .replace to remove the active class from your svg path
    $("svg .active").attr("class", $("svg .active").attr("class").replace("active",""));

    //here you set the new active element
    $("svg ."+periodClass).attr("class", periodClass+" active");

});

另外，我正在打电话

$("button").on("click", function() {
    var periodClass = $(this).parent().attr("class");
    $("svg path").each(function() {
        var cl = $(this).attr('class');
        $(this).attr('class', cl.includes(periodClass) ? cl + ' active' : cl.replace(/active/g, ''));
    });
});

选中此项

使用queryselector或查看：

$（“按钮”）。在（“单击”）上，函数（e）{
var periodClass=$（this.parent（）.attr（“类”）；
var path=document.querySelectorAll（“路径”）；
var pathToActive=document.querySelector（“路径”+periodClass）；
对于（var i=0；i可能是重复的，请先看答案。但它在这里不起作用，上面的代码反映了这些人所说的，与e有一部分。这里没有，因为我不知道在哪里定义“e”。在我的案例中，第一件事是您不需要。每个函数..使用$（“svg路径”）选择器您正在处理svg路径的每一个瞬间。如果您想单独处理每一个，您应该在每个函数中使用$（这个）指针，我建议您使用一个警报来检查periodClass是否真的得到了您想要的。只需将$（“svg.periodClass”）编辑为$（“svg.”+periodClass）答案是正确的，jQuery不能从svg元素中添加/删除类！这是删除所有类，只留下新类，基本上不将其添加到列表当单击
Ex1
按钮时，
active
类被添加到
.modern
路径并从所有其他路径中删除。对于
Ex2
，我这不是您想要的吗？您不需要在每个循环中使用正则表达式进行测试！@scraappy 1.
活动的
类需要从所有其他路径中删除。2.如果由于用户连续两次单击同一按钮而添加了两次
活动的
，那么，要删除它，我们需要正则表达式。（当然，我们可以再添加一个检查，以避免多次添加类
active
）
$("button").on("click", function() {
    var periodClass = $(this).parent().attr("class");
    $("svg path").each(function() {
        var cl = $(this).attr('class');
        $(this).attr('class', cl.includes(periodClass) ? cl + ' active' : cl.replace(/active/g, ''));
    });
});