JavaScript可以根據圖像的ID設置鏈接和標題等屬性嗎？

我正在建造一個包含600張縮略圖照片的圖庫。所有的縮略圖都是相同的大小，它們應該都以相同的方式表現。點擊縮略圖會彈出一個小圖片，並有一個名爲jQZoom的圖片放大鏡，可讓訪客更詳細地看到照片。（http://www.mind-projects.it/projects/jqzoom/）JavaScript可以根據圖像的ID設置鏈接和標題等屬性嗎？

下面是我用一個典型的縮略圖碼（數字462）：

<a href='javascript:void(0);' title="Plate 462" rel="{gallery: 'gal1', smallimage: './Vol4/Small/tafel_462.jpg',largeimage: './Vol4/Large/tafel_462.jpg'}"> 
<img src="Vol4/Thumbs/tafel_462.jpg" width="94" height="150" border="0" /></a>

的問題是，它似乎是一個很大的代碼，我想要做的事。特別是，每次添加縮略圖時，我都必須輸入4次新的圖像編號（對於標題和3個圖像尺寸的來源）。

是不是有一種方法，我可以只放在圖像編號一次（作爲ID或東西），並有一個JavaScript解釋，分配標題和三個鏈接？

來源

2011-05-07 Trevor

是的，你有正確的想法。該原則被稱爲幹 - *不要重複自己*。 http://en.wikipedia.org/wiki/Don%27t_repeat_yourself – Cheeso 2011-05-07 13:21:16

您如何看待函數返回所需的HTML？

function getImageThumb(src, title) { 
    return $('<a href="javascript:void(0);" title="' + title + '" rel="{gallery: \'gal1\', smallimage: \'./Vol4/Small/' + src + '.jpg\', largeimage: \'./Vol4/Large/' + src + '.jpg\'}">' + 
      '<img src="./Vol4/Thumbs/' + src + '.jpg" alt="' + title + '" width="94" height="150" border="0" /></a>'); 
}

所以，你可以創建每個拇指一樣：

$("#container").append(getImageThumb('tafel_462', 'Plate 462')); 
$("#container").append(getImageThumb('another_img', 'An Example'));

來源

2011-05-07 13:19:31

一個美麗的解決方案！簡單，優雅，實用。我甚至可以通過將「tafel」和「Plate」位添加到函數中並使用單個變量來簡化它。謝謝你的幫助！ – Trevor 2011-05-07 18:01:17

是的，可以。你a HTML應該有兩個屬性，讓我們說data-imgsrc，和data-gallery，並刪除一個的rel屬性和IMG的src屬性是這樣的：

<a href='javascript:void(0);' title="Plate 462" data-gallery="gal1" data-imgsrc="tafel_462.jpg"> 
<img width="94" height="150" border="0" /></a>

然後，你會怎麼做：

$(document).ready(function(){ 
    $("a[data-imgsrc]").each(function(){ //Customize your selector 
    var imgsrc = $(this).attr("data-imgsrc"); 
    var relObj = { 
     "gallery": $(this).attr("data-gallery"), 
     "smallimage": "./Vol4/Small/"+imgsrc, 
     "largeimage": "./Vol4/Large/"+imgsrc 
    }; 
    $(this).attr("rel", JSON.stringify(relObj)); 
    $(this).find("img").attr("src", "Vol4/Thumbs/"+imgsrc); 
    }); 
});

如果您的畫廊不可變，您可以刪除data-gallery屬性，只需將'gallery1'放入js。

就是這樣。希望這有助於。乾杯

來源

2011-05-07 13:26:16

JavaScript可以根據圖像的ID設置鏈接和標題等屬性嗎？

回答

相關問題