Question

这是基本的 html 结构：

然后在 js 上，一旦我点击，我检查是否有任何路径与被点击元素的<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>具有相同的类，如果是，则为每个匹配的元素添加一个类fadeIn，顺序淡化它。如果没有，请添加一个类FadeOut并按顺序淡出路径。

.parent

以上是有效的，但是当我开始点击不同的按钮时，类被继续添加，并且fadeIn和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);
  });
});

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

如何在匹配的元素中添加和删除类？

1 个答案: