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

Question

我正在尝试在灯箱中的网站上制作自定义数据属性。我只是在Javascript中为一个元素制作它并且它工作正常，但我想让它在多个元素中工作。

现在的工作原理：我有一个id =“image-1”的“a”元素，我想让javascript识别id image-2,3,4 ......显示自定义属性的正确数据。请注意，我无法使用onclick，因为它会使灯箱停止工作。

这是HTML：

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-1" href="img/photo2.jpeg" data-tags="<li>t31232est</li> <li>test</li>" data-fb="http://test1.pl" data-tt="http://test2.pl" data-gplus="http://te23432st3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo2.jpeg" class="img-responsive" alt="..."></a>
    </div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-2" href="img/photo3.jpg" data-tags="<li>test</li> <li>test</li>" data-fb="http://test55.pl" data-tt="http://test253342.pl" data-gplus="http://tes32423t3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo3.jpg" class="img-responsive" alt="..."></a>
    </div>
</div>

这是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');

$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><ul class="tag-list">' + tagList +'</ul><br/><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer">' +
        '<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li><li><a href="' + twitter + '"><img src="img/tt_circle_white.png" class="img-responsive"></a></li><li><a href="' + gplus + '"><img src="img/gplus_circle_white.png" class="img-responsive"></a></li></ul><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));

我正在尝试使其适用于Lightbox插件（http://lokeshdhakar.com/projects/lightbox2/）

更新

我刚刚在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时。这是一个例子。

<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li>

+当前的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);
  }

+控制台响应的图像。

Answer 1

一个好的解决方案是获取＆＃39; a＆＃39;的id属性。单击它时将元素放在var中并使用它来获取数据属性。

假设＆＃39; a＆＃39;元素在div＃＃container＆＃39;里面。这是我的解决方案

$('#container a').click(function(){
    var image_id    =   '#' + $(this).attr('id');
    var tagList     =   $(image_id).data('tags');
    var facebook    =   $(image_id).data('fb');
    var twitter     =   $(image_id).data('tt');
    var gplus       =   $(image_id).data('gplus');
});

Answer 2

不确定我是否理解正确。但是如果div的id是一致的，意思是image-1，image-2，image-3，......等等，你可以使用和表达式选择器并循环遍历该数组中的元素数来添加/追加你在这些div中使用动态html而不使用click事件来获取id。前 -

var array_of_divs = $("div[id^=image-]") // this gives you an array of all the element having the id starting with 'image-'

此外，您可以循环遍历此数组的长度，并根据父级的ID添加动态html：("image-"+counter_variable])

请告诉我这是否有帮助。