如何在JavaScript中删除/添加多个类

Question

我有一个滑块，当我单击导航按钮时，我想将类“ active”放在一个元素上，将“ active2”放在另一个元素上。 这是我的代码...不起作用。 它可以在第一张幻灯片上使用，这使我相信该课程不会在单击时添加到其他幻灯片上。

<script type="text/javascript">
   $(document).ready(function(){
       $('input[name="slider"]').click(function(event){
           $('.top').removeClass('active');
           $('.bkg').removeClass('active2');
           $('.slider-wrapper').find('div').eq($(this).index()).find('.top').addClass('active');
           $('.slider-wrapper').find('div').eq($(this).index()).find('.bkg').addClass('active2');

       });
    });
</script>

HTML：

<div class="wrapper">
 <input checked type=radio name="slider" id="slide1" />
  <input type=radio name="slider" id="slide2" />

  <div class="slider-wrapper">
  <div class="inner">
      <section>

<div class="top active">
            <img src="images/test.png">

        </div>
        <div class="bkg">
           <a class="active2">hello</a>
                    <img class="bkg-image" src="images/test.jpg">
        <div class="overlay"></div>

        </div>
  </section>
  <section>
    <div class="top">
      <img src="images/test.png">
    </div>
    <div class="bkg">
      <a class="active2">hello</a>
        <img class="bkg-image" src="images/test.jpg">
      <div class="overlay"></div>
    </div>
  </section>

  </div>
  <!-- .inner -->
</div>
<!-- .slider-wrapper -->
<div class="slider-dot-control">
  <label for=slide1></label>
  <label for=slide2></label>

</div>

</div>
</article>

Answer 1

find('div')正在滑块包装下查找所有div，而不仅仅是顶层的。 这导致后来的链式选择器无法按您想要的方式工作。

如果将查找结果切换为.top和.bkg，则eq选择器似乎可以正常工作。

   $(document).ready(function(){
       $('input[name="slider"]').click(function(event){
           $('.top').removeClass('active');
           $('.bkg').removeClass('active2');
           $('.slider-wrapper').find('.top').eq($(this).index()).addClass('active');
           $('.slider-wrapper').find('.bkg').eq($(this).index()).addClass('active2');           
       });
    });