通过 JS 删除 X class 时添加 class

Question

我正在尝试将 class 添加到 div，而另一个 class 已被 JS 删除。

这是我的 HTML:

<body class="homepage">

<div id="wrap">

    <div id="projects">
      <section id="project-0" class="slide active"> Slide 1</section>
      <section id="project-1" class="slide active"> Slide 2</section>
      <section id="project-2" class="slide active"> Slide 3</section>
    </div>
</div>
<div class="content"> Website main content </div>

这是一个垂直滑动，所以当你向下滚动时，active class 被 JS 删除了。我想要实现的是在从 project-2.

中删除 active 时将 class 添加到 body

这是我目前所拥有的，但它无法识别 class active 因为它是通过 JS 添加的...

if(!$("#project-2").hasClass("active")){
    $("body").addClass("shifted");
 }

JS:

var delta = 0;
var currentSlideIndex = 0;
var scrollThreshold = 30;
var slides = $(".slide");
var numSlides = slides.length;
function elementScroll (e) {
  console.log (Math.abs(delta));
  // --- Scrolling up ---
  if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

    delta--;

    if ( Math.abs(delta) >= scrollThreshold) {
    prevSlide();
    }
  }

  // --- Scrolling down ---
  else {

    delta++;

    if (delta >= scrollThreshold) {
      nextSlide();
    }
  }

  // Prevent page from scrolling
  return false;
}


function showSlide() {

  // reset
  delta = 0;

  slides.each(function(i, slide) {
    $(slide).toggleClass('active', (i >= currentSlideIndex));
  });

}


function prevSlide() {

  currentSlideIndex--;

  if (currentSlideIndex < 0) {
    currentSlideIndex = 0;
  }

  showSlide();
}

function nextSlide() {

  currentSlideIndex++;

  if (currentSlideIndex > numSlides) { 
    currentSlideIndex = numSlides;
  }

  showSlide();
}

$(window).on({
  'DOMMouseScroll mousewheel': elementScroll
});

You can see here how it works 谢谢

Answer 1

您对缺少 class 的检查仅启动一次。您必须以 100 毫秒或任何您想要的间隔执行此操作：

setInterval(function()
{
    if (!$("#project-2").hasClass("active")){
        $("body").addClass("shifted");
    }
}, 100);

Answer 2

通过查看您的 JS 代码，我相信您想在向下滚动时将 class 添加到 body。您可以尝试以下代码：

function prevSlide() {

    currentSlideIndex--;

    if(currentSlideIndex == (numSlides-1))
    {
        $("body").removeClass("shifted"); // remove the class from body
    }
    if (currentSlideIndex < 0) {
        currentSlideIndex = 0;
    }

    showSlide();
}

function nextSlide() {

    currentSlideIndex++;

    if (currentSlideIndex > numSlides) { 
        currentSlideIndex = numSlides;

        $("body").addClass("shifted"); // add the class to body

    }

    showSlide();
}

通过 JS 删除 X class 时添加 class

Add class when X class is been removed via JS

html

javascript

jquery

class

slide