当前位置:  开发笔记 > 编程语言 > 正文

具有多个元素的自定义数据属性

如何解决《具有多个元素的自定义数据属性》经验,为你挑选了0个好方法。

我正在尝试在我的网站上在灯箱中制作自定义数据属性.我只是在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时.这是一个例子.

+目前的JS:

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);
  }

+控制台响应的图像.

在此输入图像描述

在此输入图像描述

推荐阅读
coco2冰冰
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有