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

使用queryselector或查看： JQuery can't add a class to an SVG

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Jquery无法将类添加到svg，因此您必须使用该属性。

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

$("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");

});

P.S。我在手机上打字

Answer 3

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

检查此fiddle

如何将类添加到svg路径？

3 个答案: