給圖像提供信息

我得到了一個（也許有點愚蠢）的問題。我正在使用JavaScript製作照片庫。我需要給每個圖像一些信息（一個ID），所以我可以問javascript什麼圖像目前打開。給圖像提供信息

實施例：

我得到了一些圖像的陣列。這些圖片有ID 1,2和3.當我使用圖庫瀏覽圖片時，我想知道我在看什麼圖片。

它可以通過給我的圖像alt我需要的信息。所以我可以去;

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

但我雖然不是這樣做的方式。有這個問題的簡單解決方案嗎？

來源

2015-04-12 Mr. Sam

您可以使用任何數據屬性。您可以設置數據標題屬性，甚至只使用標題。 –

我不清楚你如何繼續。在您的代碼中，您使用「圖像」作爲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'); 

    ... 
}

來源

2015-04-12 22:59:31

來自[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;

來源

2015-04-12 23:01:22 gerrytan

給圖像提供信息

回答

相關問題