0

我正在创建一个网站，但遇到了一些问题。基本上，我使用的是 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>
4

1 回答 1

0

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

您可以使用 id，也可以像以前一样使用parents()and结合使用：find()

$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
于 2013-07-15T01:29:18.460 回答