Javascript的縮略圖更改

Question

我目前正在製作網站的過程中遇到了一些問題。該部分涉及3張照片，2張小照片和1張大照片。我得到了一個javascript函數，所以當你點擊其中一張小圖片時，它會佔據大圖片的位置。問題？共有3部分，當你點擊一張小圖片時，所有的大圖片都會被換出，而不是在相應的部分中。任何幫助將不勝感激。這裏有一些代碼。謝謝！

$(document).ready(function(){ 
     $('img').click(function(){ 
     var url = $(this).attr('src'); 
     var bigUrl = $('.large-picture > img').attr('src'); 
     $('.large-picture > img').attr('src', url); 
     $(this).attr('src', bigUrl); 
     }); 
     }); 

<div class = 'picture-container'> 
      <div class = 'large-picture' style = 'width:50%;height:100%;float:left;'> 
       <img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%'> 
      </div> 
      <div class = 'picture-content' style = 'float:right;width:45%;height:100%;'> 
       <div class='picture-title'>UNIQUE CLIENT EXPERIENCE</div> 
       <div class='picture-text'>Not only is our production facility unique in how easy it is to access for our clients, but our approach is always to instill a sense of comfort and relaxation for our clients. We have the options of full hair and make-up and car services available, at no additional charge, for all of our filmings.</div> 
       <div class = 'small-picture-wrapper'> 
        <div class = 'small-picture' style = 'float:left;height:100%;'> 
         <img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'> 
        </div> 
        <div class = 'small-picture' style = 'float:right;height:100%;'> 
         <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

更改您的JS這樣的：

$(document).ready(function(){ 
    $('img').click(function(){ 
     var url = $(this).attr('src'); 
     var bigUrl = $(this).parents('.picture-container').find('.large-picture > img').attr('src'); 
     $(this).parents('.picture-container').find('.large-picture > img').attr('src', url); 
     $(this).attr('src', bigUrl); 
    }); 
}); 

$(this).parents('.picture-container')發現.picture容器的圖像中包含的，查找那麼它只能搜索此容器內的大圖像後，所以它沒有找到包含在其他.picture-containers中的其他大圖片。