给图像提供信息

问题描述：

我得到了一个（也许有点愚蠢）的问题。我正在使用JavaScript制作照片库。我需要给每个图像一些信息（一个ID），所以我可以问javascript什么图像目前打开。给图像提供信息

实施例：

我得到了一些图像的阵列。这些图片有ID 1,2和3.当我使用图库浏览图片时，我想知道我在看什么图片。

它可以通过给我的图像alt我需要的信息。所以我可以去;

var id = document.getElementById("image").alt;

但我虽然不是这样做的方式。有这个问题的简单解决方案吗？

您可以使用任何数据属性。您可以设置数据标题属性，甚至只使用标题。 –

我不清楚你如何继续。在您的代码中，您使用“图像”作为ID，然后从“ALT”属性中读取“ID”。我很肯定这确实是*不是这样做的。要知道“你在看什么形象”，你需要问自己 - 你必须做什么*看图像*？如果他例如**点击**，您只需添加一个点击处理程序并在其中设置一个属性：$（this）.attr（“clicked”）（*并清除其他图像中的任何剩余属性*）。没有真正看到画廊代码，人们不能比这更具体。 – LSerni

答

我假设你有多个<img>元素。你可以给他们每个人相同的价值，所以你可以很容易地得到他们所有的参考。然后，您可以使用data-属性来查找要分配给它们的任何数据。

<img class="gallery-image" data-id="1" ... 
<img class="gallery-image" data-id="2" ... 
<img class="gallery-image" data-id="3" ...

的JavaScript

var images = document.getElementsByClassName('gallery-image'); 
for (var i = 0; i < images.length; i++) { 
    var id = images[i].getAttribute('data-id'); 

    ... 
}

来自[W3 HTML5规范]（http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#embedding-custom-non-visible-data-with-the-data-* - 属性），你可以通过使用'images [i] .dataset.attribute'来访问data- *属性; – Magador

答

您可以添加/删除使用jQuery的自定义属性，以你的形象，以表明它是积极的：

$(..).attr('c-active', true);

将导致：

<img src=".." c-active/>

将它设置为false会删除该属性。

由于该属性不是标准的html语法，因此某些框架/浏览器可能不满意它。

您还可以使用jQuery数据：

$(..).data('c-active',true); 
$(..).data('c-active',false);

或者只保留一个简单的JavaScript变量来表示其图像ID是有效的（但你必须更新此每次图像幻灯片）

var activeId = 5;

相关推荐