クリック可能なアイテムに特定のクラスがある場合、Jqueryイメージがスワップしてdiv内にスワップします

Question

Im jquery noob。 クリックしたサムネイルのクラスに基づいて画像をスワップしたり、divを表示するスクリプトが必要でした。画像のスワッピングはうまくいくが、divになったときは、適切なクラスのdivを隠してクリックしたサムネイルのIDに基づいて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

は、このリンクをチェックしてください - 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(); 
       } 
     }); 
     }); 

Answer 2

が

のように思えます210

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

は次のようになります。

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