如何在单击拇指图像上以大图像添加活动类

Question

我使用 jquery 制作了一个照片库。

当我点击下一步时，我的图像会根据索引发生变化。但我想，当我也点击拇指（小图）图像时，大图将根据该索引显示。但我不知道我该怎么做。

请帮我解决这个问题。

如果可以的话，请把完整的代码清楚的给我。

我的一页代码是：

$(function() {
  $("#thumbs").find(".thumb:first").addClass("active");
  $("#large").find(".bigthumb:first").addClass("active");

  var getIndex = $("#thumbs").find(".active").index();

  $(".controls").each(function() {
    $(this).find(".next").click(function() {
      getIndex = $("#thumbs").find(".active").index();
      getIndex += 1;
      if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
        getIndex = 0;
      }
      setActiveImage(getIndex);
    });
    $(this).find(".prev").click(function() {
      getIndex -= 1;
      if (getIndex < 0) {
        getIndex = $("#thumbs").find(".thumb").length - 1;
      }
      setActiveImage(getIndex); //Set/Show Active Image
    });
  });

});

function setActiveImage(index) {
  if (typeof(index) == "undefined" || index == "" || index == null) index = 0;

  $("#thumbs").find(".thumb").removeClass("active");
  $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
  $("#large").find(".bigthumb").removeClass("active");
  $("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}

#thumbs {
  text-align: center;
  background: #77a5c6;
  padding: 5px;
}

.thumb {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}

#thumbs .active {
  border: 3px solid #333;
}

.controls {
  margin-left: 10px;
}

.controls img {
  cursor: pointer;
  margin: 0px;
}

.controls span {
  font-size: 13px;
  display: inline-block;
  vertical-align: top;
  margin-top: 5px;
}

#large {
  text-align: center;
}

#large .bigthumb {
  display: none;
}

#large .active {
  display: block;
}

#large .active img {
  border: 2px solid #333;
}

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id="panel">
  <div class="controls">
    <i class="prev fa fa-hand-o-left"> Prev</i>
    <span>
          ---Thumbnail Navigation--- 
        </span>
    <i class="next fa fa-hand-o-left"> Next</i>
  </div>


  <div id="thumbs">
    <div class="thumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
    </div>
    <div class="thumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
    </div>
  </div>


  <div class="controls" align="center" width="400px">
    <i class="prev fa fa-hand-o-left"> Prev</i>
    <span>
          ---Large Image Navigation--- 
        </span>
    <i class="next fa fa-hand-o-left"> Next</i>
  </div>


  <div id="large">
    <div class="bigthumb active">
      <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
    </div>
    <div class="bigthumb">
      <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
    </div>
  </div>
</div>

Answer 1

只需点击.thumb 上的事件并使用 .index() 获取其 index 并将其传递给您的 setActiveImage 函数，如下所示：

$("#thumbs .thumb").on('click',function(){
   var index=$(this).index();
   setActiveImage(index);
})

DEMO

Answer 2

或者您可以简单地将onclick 事件添加到标签定义中，就像我在这个fiddle 中所做的那样

<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" onclick="setActiveImage(0) "/>