javascript - javascript 中带有事件类的缩略图

Question

首先我对javascript一无所知。我有这个 slider :

<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>