0

我目前正在制作网站，但遇到了一些问题。该部分涉及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>
4

1 回答 1

0

将您的 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-container，之后的 find 只搜索该容器内的大图像，因此它不会找到其他 .picture-containers 中包含的其他大图像。

于 2013-07-14T20:33:41.480 回答