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

Question

I have a slider and when I click on nav buttons, I want to put the class "active" on one element and "active2" on another one. Here's the code I have... It's not working. It works on first slide, which leads me to believe the class is not being added to other slide on click.

<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

The find('div') was finding all divs under slider-wrapper, not just the top level ones. That resulted in the later chained selectors to not work the way you wanted.

If you switch the find to .top and .bkg then the eq selector seems to work as intended.

   $(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');           
       });
    });