Question

我是一个jquery noob。我需要一个脚本，可以根据点击的缩略图的类替换图像或显示div。图像交换效果很好，但是当它涉及到div时，我会使用相应的类隐藏div，然后根据点击的缩略图的id显示一个div。我想找到一个解决方案，不依赖于某人进入脚本添加另一个视频div。

这是我得到的：

CSS

.s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder {
    display:none;   
}

HTML

 <div id="video">
    <div class="videoHolder s-07">Video 1</div>
    <div class="videoHolder s-08">Video 2</div>
    <div class="videoHolder s-09">Video 3</div>
    <img src="images/bigimages-01.jpg" width="350" height="250">
    </div>
    <div id="thumbs">
      <img id="s-01" class="photo" src="images/thumbs-01.jpg" width="80" height="80">
      <img id="s-02" class="photo" src="images/thumbs-02.jpg" width="80" height="80">
      <img id="s-03" class="photo" src="images/thumbs-03.jpg" width="80" height="80">
      <img id="s-04" class="photo" src="images/thumbs-04.jpg" width="80" height="80">
      <img id="s-05" class="photo" src="images/thumbs-05.jpg" width="80" height="80">
      <img id="s-06" class="photo" src="images/thumbs-06.jpg" width="80" height="80">
      <img id="s-07" class="video" src="images/thumbs-07.jpg" width="80" height="80">
      <img id="s-08" class="video" src="images/thumbs-08.jpg" width="80" height="80">
      <img id="s-09" class="video" src="images/thumbs-09.jpg" width="80" height="80">
</div>

Jquery

$(document).ready(function(){
    var vidActive = 0;

// Photo
  $("#thumbs img.photo").click(function() {
      var newImgSrc = "images/bigimage" + this.id + ".jpg";
            if (vidActive = 0){
                $("#video img").attr("src", newImgSrc); }
            else { 
                $(".s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder").hide();
                var vidActive = 0;
                $("#video img").attr("src", newImgSrc); }
     });
// Video    
    $("#thumbs img.video").click(function() {
      var whichDiv = "div." + this.id;

            if (vidActive = 0){
                $("#video div"+whichDiv).show(); }
            else { 
                $(".s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder").hide();
                $("#video "+whichDiv).show(); }
                var vidActive = 1;

});

});

Answer 1

似乎

if (vidActive = 0){
    $("#video div"+whichDiv).show();
} ...

应该是：

if (vidActive = 0) {
    $("#video " + whichDiv).show();
} ...

Answer 2

点击此链接 - http://jsfiddle.net/Pj8qH/23/

$(document).ready(function(){   
        $("#thumbs img").click(function() {
            var $this = $(this),
                id = $this.attr('id'),
                newImgSrc = "images/bigimage" + id  + ".jpg",
                videoimg = $('#video img'),
                videoHolder = $('.videoHolder');

                if($this.hasClass('photo')){
                      videoHolder.hide();
                      videoimg.attr('src',newImgSrc);            
                }else{
                      videoHolder.hide();
                      $('#video').find('.'+id).show();
                }
         });
      });

如果可点击项具有某个类，则Jquery图像交换以交换div

2 个答案: