如果可點擊項目具有某個類別，jquery圖像交換到div中交換

我是jquery noob。我需要一個腳本來替換圖像或基於點擊縮略圖的類來顯示div。圖像交換工作的效果很好，但是當涉及到div時，我用相應的類來隱藏div，然後根據點擊縮略圖的id顯示一個div。我想找到一個解決方案，不會依賴某人進入腳本添加另一個視頻div。如果可點擊項目具有某個類別，jquery圖像交換到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; 

}); 

});

來源

2012-02-19 Bart

檢查此鏈接 - 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(); 
       } 
     }); 
     });

來源

2012-02-19 07:49:18

太棒了，謝謝。 – Bart 2012-02-19 23:56:58

好像

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

應該是：

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

來源

2012-02-19 06:24:41 dfsq

您的權利，忘了後，我意識到，更新這個帖子。謝謝，很好。 – Bart 2012-02-19 23:57:51

如果可點擊項目具有某個類別，jquery圖像交換到div中交換

回答

相關問題