javascript - 根据其他元素添加和删除类

Question

所以我有幻灯片轮播(适用于 fullPage.js):

<div id="myContainer">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>

我有一些带背景的积木

<div class="bg-main" id="bgOne"></div>
<div class="bg-main" id="bgTwo"></div>
<div class="bg-main" id="bgThree"></div>
<div class="bg-main" id="bgFour"></div>

通过将类 active 添加到具有类 .one、.two 等的 block 来进行幻灯片交换。 我尝试将类添加到背景取决于事件幻灯片的 block 。例如 - 如果 .slide.two 具有类 .active，则将类添加到 block #bgTwo。 这是我目前的 JS。它不起作用:

<script type="text/javascript">
    $(document).ready(function(){ 
      if ( $('#myContainer .one').hasClass('active') ) {
        $('.bg-main').removeClass('active');
        $('#bgOne').addClass('active'); 
        } else if ( $('#myContainer .two').hasClass('active') )
           {
          $('.bg-main').removeClass('active');
          $('#bgTwo').addClass('active');
        }
      });
    </script>

Answer 1

使用回调 onSlideLeave

演示

$(document).ready(function() {
  $('#fullPage').fullpage({
    onSlideLeave: function(link, secIdx, sldIdx, dir, next) {
      $('.test .bg-main').removeClass('active');
      $('.test .bg-main').eq(next).addClass('active');
    }
  });
});

.slide {
  text-align: center
}

.test {
  position: fixed;
  top: 75%;
  right:calc(50% - 220px);
}

.bg-main {
  height: 30px;
  width: 100px;
  background: grey;
  display:inline-block;
  text-align:center;
  outline:1px solid #fff;
  margin:0;
}

.one,
#bgOne.active {
  background: #fc0;
}

.two,
#bgTwo.active {
  background: #f00;
}

.three,
#bgThree.active {
  background: #0f0;
}

.four,
#bgFour.active {
  background: #00f;
}

<link href='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.css' rel='stylesheet'>

<div id="fullPage">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>
<div class='test'>
  <div class="bg-main active" id="bgOne">1</div>
  <div class="bg-main" id="bgTwo">2</div>
  <div class="bg-main" id="bgThree">3</div>
  <div class="bg-main" id="bgFour">4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.js'></script>