我正在创建站点,遇到了一些问题。基本上我正在处理的是 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>
最佳答案
当您选择 .large-picture
以应用新图像 src 时,您使用的是类选择器。据推测,所有三个部分都有一个包含此类的元素,这意味着所有三个部分都由您的 .large-picture
选择器选择。您需要一个更明确的选择器来仅获取适当的元素。
您可以使用一个 id,或者您可以像以前一样结合使用 parents()
和 find()
:
$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
关于javascript图片更改无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17645489/