我正在尝试在我的网站上在灯箱中制作自定义数据属性.我只是在Javascript中为一个元素制作它并且它工作正常,但我想让它在多个元素中工作.
它现在是如何工作的:我有一个id为"image-1"的"a"元素,我想让javascript识别id image-2,3,4 ...并从自定义属性中显示正确的数据.请注意,我无法使用onclick,因为它使灯箱停止工作.
这是HTML:
这是JS:
var global = document.getElementById('image-1'); var tagList = global.getAttribute('data-tags'); var facebook = global.getAttribute('data-fb'); var twitter = global.getAttribute('data-tt'); var gplus = global.getAttribute('data-gplus'); $('').appendTo($('body'));
我试图让它适用于Lightbox插件(http://lokeshdhakar.com/projects/lightbox2/)
UPDATE
我只是在onclick中使用了函数,当我测试它时,它显示正确的ID.但仍然无法将其作为字符串放入getElementByID中.
id="image-1" onclick="GetID(this.id)" window.GetID = function(elem_id){ alert(elem_id); } var global = document.getElementById(GetID()); var tagList = global.getAttribute('data-tags'); var facebook = global.getAttribute('data-fb'); var twitter = global.getAttribute('data-tt'); var gplus = global.getAttribute('data-gplus');
更新2:
几乎完成了.我把我的变量变成了全局变量.控制台日志显示正确的ID和其他数据属性.问题是当我试图将结果放入javascript中的html时.这是一个例子.
id="image-1" onclick="window.GetID(this.id)" var global; var tagList; var facebook; var twitter; var gplus; window.GetID = function(elem_id){ console.log(elem_id); global = document.getElementById(elem_id); console.log(global); tagList = global.getAttribute('data-tags'); console.log(tagList); facebook = global.getAttribute('data-fb'); console.log(facebook); twitter = global.getAttribute('data-tt'); console.log(twitter); gplus = global.getAttribute('data-gplus'); console.log(gplus); }
+控制台响应的图像.