javascript中的活动类的缩略图

Question

首先，我对JavaScript一无所知。 我有这个滑块：

<div class="col-md-12" id="slider"> 
    <!-- Top part of the slider --> 
    <div id="carousel-bounding-box"> 
     <div class="carousel slide" id="myCarousel"> 
      <!-- Carousel items --> 
      <div class="carousel-inner"> 
       <div class="item active" data-slide-number="0"> 
       <img src="img/one.png"></div> 

       <div class="item" data-slide-number="1"> 
       <img src="img/two.png"></div> 

       <div class="item" data-slide-number="2"> 
       <img src="img/three.png"></div> 

       <div class="item" data-slide-number="3"> 
       <img src="img/four.png"></div> 
      </div><!-- Carousel nav --> 
     </div> 
    </div> 
</div><!--/Slider--> 

<div class="col-md-12" id="slider-thumbs"> 
    <!-- Bottom switcher of slider --> 
    <div class="carousel slide" id="indicador"> 
     <div class="carousel-inner"> 

      <div class="item active"> 
       <div class="col-md-2 miniaturas"> 
        <a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a> 
       </div> 

       <div class="col-md-2 miniaturas"> 
        <a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a> 
       </div> 
      </div> 

      <div class="item"> 
       <div class="col-md-2 miniaturas"> 
        <a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a> 
       </div> 

       <div class="col-md-2 miniaturas"> 
        <a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

而与此JavaScript中，它们的工作原理：

$('[id^=carousel-selector-]').click(function() { 
     var id_selector = $(this).attr("id"); 
     try { 
      var id = /-(\d+)$/.exec(id_selector)[1]; 
      console.log(id_selector, id); 
      jQuery('#myCarousel').carousel(parseInt(id)); 
     } catch (e) { 
      console.log('Regex failed!', e); 
     } 
    }); 

但我想提出缩略图与活动课，我怎么可以用JavaScript使这个// jQuery的？

非常感谢您的帮助！

Answer 1

获取所有的缩略图与$('.thumbnail img');，那么当你点击#carousel-selector-*要素之一，从所有其他缩略图删除.active类，并把它添加到您点击链接的一个内。

var $imgs = $('.thumbnail img'); 
 
$('[id^=carousel-selector-]').click(function() { 
 
    var id_selector = $(this).attr("id"), 
 
    $img = $(this).find('img'); 
 
    $imgs.not($img).removeClass('active'); 
 
    $img.addClass('active'); 
 
    try { 
 
    var id = /-(\d+)$/.exec(id_selector)[1]; 
 
    console.log(id_selector, id); 
 
    jQuery('#myCarousel').carousel(parseInt(id)); 
 
    } catch (e) { 
 
    console.log('Regex failed!', e); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12" id="slider"> 
 
    <!-- Top part of the slider --> 
 
    <div id="carousel-bounding-box"> 
 
    <div class="carousel slide" id="myCarousel"> 
 
     <!-- Carousel items --> 
 
     <div class="carousel-inner"> 
 
     <div class="item active" data-slide-number="0"> 
 
      <img src="img/one.png"></div> 
 

 
     <div class="item" data-slide-number="1"> 
 
      <img src="img/two.png"></div> 
 

 
     <div class="item" data-slide-number="2"> 
 
      <img src="img/three.png"></div> 
 

 
     <div class="item" data-slide-number="3"> 
 
      <img src="img/four.png"></div> 
 
     </div> 
 
     <!-- Carousel nav --> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--/Slider--> 
 

 
<div class="col-md-12" id="slider-thumbs"> 
 
    <!-- Bottom switcher of slider --> 
 
    <div class="carousel slide" id="indicador"> 
 
    <div class="carousel-inner"> 
 

 
     <div class="item active"> 
 
     <div class="col-md-2 miniaturas"> 
 
      <a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a> 
 
     </div> 
 

 
     <div class="col-md-2 miniaturas"> 
 
      <a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <div class="col-md-2 miniaturas"> 
 
      <a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a> 
 
     </div> 
 

 
     <div class="col-md-2 miniaturas"> 
 
      <a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>