Question

我正在创建一个网站，并遇到了一些问题。基本上我正在使用的是3张图片的集合，两张小图片，一张大图片。我想要的是，当你点击其中一张小图片时，它会拍摄更大的图片。我有一个javascript函数可以成功完成这个但有一个小问题。这三个图片的集合中有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

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

您可以使用ID，也可以像以前一样使用parents()和find()：

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

javascript图片更改无法正常工作

1 个答案: