javascript - javascript 可以根据图像的 ID 设置链接和标题等属性吗？

Question

我正在构建一个包含 600 张缩略图的图库。所有缩略图的大小都相同，它们的行为也应该相同。单击缩略图将显示图像的小版本，并且有一个称为 jQZoom 的图像放大镜可以让访问者更详细地查看照片。 ( http://www.mind-projects.it/projects/jqzoom/ )

这是我用于典型缩略图(编号 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 解释它以分配标题和三个链接？

Answer 1

您如何看待返回所需 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'));