如何在使用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

回答

相關問題