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中的其他大图片。