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

我正试图在我的网站lightbox中创建一个自定义数据属性。我只是在Javascript中为一个元素创建了它，它工作得很好，但我想让它在多个元素中工作

它现在是如何工作的：我有一个id=“image-1”的“a”元素，我想让javascript识别id image-2,3,4。。。并显示自定义属性中的正确数据。注意，我不能使用onclick，因为它会使lightbox停止工作

以下是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>

更新2:

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

差不多完成了。我已经将变量设置为全局变量。控制台日志显示正确的ID和其他数据属性。问题是当我试图用javascript将结果转换成html时。下面是一个例子

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

+控制台响应图像。

---

一个好的解决方案是在单击“A”元素时获取该元素的id属性，将其放入var中，并使用它获取数据属性

假设'a'元素位于div'容器'内，这是我的解决方案

$('#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');
});

---

不确定我是否理解正确。但是如果div的id是一致的，这意味着image-1、image-2、image-3，。。。依此类推，您可以使用和表达式选择器并循环该数组中的元素数，在这些div中添加/附加动态html，而无需使用单击事件来获取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_变量]）

---

如果有帮助，请告诉我。

我看不出您的代码不识别第二个锚元素。预期的功能是什么？我不知道如何在不使用click（）的情况下实现它。也许有机会通过在HTML中使用OnClick（）来获取id，并将其推入变量中，并将其作为ElementId使用？嗯，

push

是

Array.prototype的函数，所以我想说没有办法将其推入变量本身，但您刚才描述的完全可能，在“OnClick”中函数使用
this
关键字，它引用调用事件的元素。以及如何在javascript文件中使用它并将其分配到getElementById（）？在继续尝试使用Javascript进行开发之前，您需要花一些时间学习如何对Javascript进行概念化。。如果你不知道如何利用我提供给你的信息，那就意味着如果你要在没有人牵着你的手的情况下进行任何开发，就需要处理更深层次的理解缺失
$('#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');
});

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