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

【问题标题】：Can javascript set attributes like links and a title based on an ID of an image?javascript可以根据图像的ID设置链接和标题等属性吗？
【发布时间】：2011-05-07 13:08:04
【问题描述】：

我正在构建一个包含 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 解释它来分配标题和三个链接？

【问题讨论】：

是的，你的想法是对的。该原则称为 DRY - 不要重复自己。 en.wikipedia.org/wiki/Don%27t_repeat_yourself

标签： javascript jquery jquery-plugins image-gallery

【解决方案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'));

【讨论】：

一个漂亮的解决方案！简单、优雅、实用。我什至可以通过将“tafel”和“Plate”位放入函数中并且仅使用单个变量作为数字来简化它。感谢您的帮助！

【解决方案2】：

是的，你可以。你的a html 应该有两个属性，比如说data-imgsrc 和data-gallery，并像这样删除a 的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 中。

就是这样。希望这可以帮助。干杯

【讨论】：