如何在使用jQuery

-1

我的DOM看起来像这样的缩略图点击时显示的主图像...如何在使用jQuery

<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的新手，并在第一时间使用它。

来源

2012-08-07 Sachin

我不确定那是什么，但它不是HTML。请发布您的浏览器看到的实际的，呈现的HTML;因为这就是JavaScript的工作原理。 – 2012-08-07 18:12:54

他使用JSTL的forEach核心标签。 – gaspyr 2012-08-07 18:14:21

您可以在缩略图的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>

请记住，这仅仅是一个办法做到这一点。您还可以用其他方式存储主图像。

希望这会有所帮助！

编辑：更新的代码示例使用class属性

来源

2012-08-07 18:16:01

谢谢，我会试试这个。我对jQuery非常陌生;实际上在第一次使用它。 – Sachin 2012-08-07 18:22:38

如果我将主图像src的列表保存在alt标签内，当我无法找到缩略图图像时，我的页面将无法显示替代图像/文本。你能否建议其他方法？ – Sachin 2012-08-07 18:28:45

这是非常真实的，如果你想你可以将它存储在类属性=）。我更新了我的代码示例以反映此 – 2012-08-07 18:35:56

我愿意把你的图片的路径为每个缩略图的数据路径标签，然后当你点击拇指，抓住从数据 - 这条道路路径，并使主路径的路径为src。

干杯！

来源

2012-08-07 18:17:36 Luke

修订以前的职位/答案（使用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属性即可。

来源

2012-08-07 18:30:24

如何在使用jQuery

回答

相关问题