1

First I am checking if the clicked button parent has the same class of a given path, then if the path class matches the parent clicked button class, it should be adding a class to the path itself.

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

Also tried

$('svg path.'+periodClass).addClass('active');
rob.m
  • 9,843
  • 19
  • 73
  • 162
  • Possible duplicate of [Add class on svg path element](http://stackoverflow.com/questions/36130050/add-class-on-svg-path-element) – Venugopal Mar 05 '17 at 17:48
  • http://stackoverflow.com/questions/36130050/add-class-on-svg-path-element – Venugopal Mar 05 '17 at 17:48
  • tried that, seen that answer first. But it isn't working here, the above code reflexted what the guys said, a parte from e. which isn't here as i don't know where would I define "e." on my case – rob.m Mar 05 '17 at 17:49
  • first thing is that you wont need .each function .. by using the $("svg path") selector you are working with each every instant of svg path..if you want to handle each separately you should use $(this) pointer in your each function and i suggest you use an alert to check if periodClass really gets what you are expecting.. – Amin Setayeshfar Mar 05 '17 at 17:49

3 Answers3

2

use queryselector or see : 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>
Community
  • 1
  • 1
scraaappy
  • 2,830
  • 2
  • 19
  • 29
0

Jquery can't add a class to an svg so you have to use the attribute.

Also you don't need the each loop there because you already know that you have a specific class on each path. So you can have:

$("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. im typing on a phone

Harry
  • 3,930
  • 2
  • 14
  • 31
0
$("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, ''));
    });
});

check this fiddle

Venugopal
  • 1,888
  • 1
  • 17
  • 30
  • this is removing all classes and only leaving the new class, basically not adding it to the list – rob.m Mar 05 '17 at 18:05
  • when `Ex1` button is clicked, `active` class is being added to `.modern` path and removed from all other paths. and for `Ex2`, it's `.classic`. isn't this what you want? – Venugopal Mar 05 '17 at 18:11
  • you don't need a test with a regex in an each loop! – scraaappy Mar 05 '17 at 18:48
  • @scraaappy 1. the `active` class needs to be removed from all other paths. 2. if the `active` is added twice because the user clicked on the same button twice continuously, then, to remove it we need regex. (ofcourse we can add one more check to avoid adding the class `active` multiple times) – Venugopal Mar 05 '17 at 18:59