如何添加和刪除匹配元素的類？

Question

這是基本的HTML結構：

<div class="modern"> 
    <button type="button">Modern</button> 
</div> 
<div class="recent"> 
    <button type="button"><Recent</button> 
</div> 

<svg> 
    <path class="modern">A</path> 
    <path class="recent">B</path> 
    <path class="recent">C</path> 
    <path class="modern">D</path> 
    <path class="recent">E</path> 
</svg> 

然後在JS一次我點擊我檢查，如果任何路徑具有相同的類按點擊的元素的.parent，如果是添加一個類淡入到每個匹配的元素並逐漸淡入。如果沒有，請添加一個類FadeOut並按順序淡出路徑。

$("button").on("click", function() { 
    $(this).addClass("active"); 
    var periodClass = $(this).parent().attr("class"); 
    var gapBetweenEach = 200; 
    var speedOfFade = 400; 
    $("svg path").each(function(i, path) { 
    var cl = $(this).attr('class'); 
    $(this).attr('class', cl.includes(periodClass) ? cl + ' fadeIn' : cl.replace(/fadeIn/g, 'fadeOut')) 
    $(".fadeIn").delay(gapBetweenEach * i).fadeIn(speedOfFade); 
    $(".fadeOut").delay(gapBetweenEach * i).fadeOut(speedOfFade); 
    }); 
}); 

上述工作，但是當我開始點擊不同的按鈕不斷被添加類和淡入淡出和順序的整個邏輯被打破。

這些點擊幾下後，我得到了類

fadeOut fadeOut fadeIn 

Answer 1

您可以jQuery的.hasClass()，.addClass()和.removeClass()方法

$("svg path").each(function(i, path) { 
    var elem = $(this); 
    if (elem.hasClass(periodClass)) { 
     elem.removeClass('fadeOut').addClass('fadeIn'); 
    } else { 
     elem.removeClass('fadeIn').addClass('fadeOut'); 
    } 

    //Rest of your code ... 
    $(".fadeIn").delay(gapBetweenEach * i).fadeIn(speedOfFade); 
    $(".fadeOut").delay(gapBetweenEach * i).fadeOut(speedOfFade); 
});