Question

我的DOM看起来像这样......

<div id="leftPan">
    <div id="leftmemberPan">
        <a href="#"><img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/></a>    
    </div>
    <div id="thumbnailPan">
        <c:forEach items="${article.images}" var="image">                       
            <a href="#"><img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/></a>                        
        </c:forEach>
    </div>
</div>

leftmemberPan显示主图片，thumbnailPan显示缩略图列表

<c:forEach items="${article.images}" var="image">只是一个JSTL标记，它包含缩略图图像数组。

请注意，我是jQuery的新手并且第一次使用它。

Answer 1

您可以在缩略图的alt标签内保存主图像src的列表，然后修改leftmemberPan src以显示主图像。

例如：

<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />

<script type="text/javascript">
    $(".thumbnail").click(function()
    {
        var class_array = $(this).attr("class").split(' ');
        var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
        $("#leftmemberPan").attr('src', newsrc);
    });
</script>

请记住，这只是一种方法。您也可以通过许多其他方式存储主图像。

希望这有帮助！

编辑：更新了代码示例以使用类属性

Answer 2

我会将图像的路径放入每个缩略图的数据路径标记中，然后当您单击拇指时，从数据路径中获取该路径并将主路图像的src设为该路径。

干杯！

Answer 3

修改以前的帖子/答案（使用jQuery 1.7）......

<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />

<script type="text/javascript">
    var mainImage = $("img","#leftmemberPan")[0];
    $("#thumbnailPan").on("click", ".thumbnail", function(event){
        mainImage.src = $(this).data("file");
    });
</script>

使用主文件图像路径的数据属性。
在页面加载后执行一次（-time）DOM查找以引用主图像元件。
只需使用缩略图的数据属性设置图像元素的src属性即可。

如何使用jQuery单击其缩略图时显示主图像

3 个答案: