javascript图片更改无法正常工作

Question

我正在创建站点，遇到了一些问题。基本上我正在处理的是 3 张图片的集合，两张小的，一张大的。我想要的是，当您单击其中一张小图片时，它会占据大图片的位置。我有一个 javascript 函数可以成功执行此操作，但有一个小问题。这些 3 张图片的集合中有 3 张，因此当您单击一张小图片以将其与大图片交换时，小图片会占据所有 3 张大图片的位置，而不仅仅是其部分的一张图片。有什么建议么？谢谢

JavaScript 函数

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

其中一个部分是什么样的

 <div class = 'main-content'>
        <div class = 'picture-container'>
            <div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
                <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
            </div>
            <div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
                <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</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

当您选择 .large-picture 以应用新图像 src 时，您使用的是类选择器。据推测，所有三个部分都有一个包含此类的元素，这意味着所有三个部分都由您的 .large-picture 选择器选择。您需要一个更明确的选择器来仅获取适当的元素。

您可以使用一个 id，或者您可以像以前一样结合使用 parents() 和 find():

$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);