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设置链接和标题等属性吗？

回答

相关问题