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

はまた、あなたの属性を使用する必要がありますので、jQueryのSVGにクラスを追加することはできません

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

Answer 1

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

Answer 2

を試してみました。

また、各パスに特定のクラスがあることをすでに知っているので、ループを繰り返す必要はありません。だからあなたは：

$("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タイピングが

Answer 3

使用queryselectorかは、以下を参照してください。[SVGパス要素にクラスを追加します]の 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>