Javascript 使用NameNodeMap从事件侦听器目标获取属性

我有一个包装在一个div中的图像库。我没有将onclick事件分配给有限的图像列表，而是将onclick分配给包装器div。图像信息由ajax调用提供，我循环通过响应数据创建HTML，并将其注入包装器div。现在，每个图像都包含用于传递给稍后打开灯箱/模式窗口。一切都很好，但随着向每个图像添加更多属性，我注意到在使用IE或Firefox开发工具检查图像时，属性的顺序有所不同。该顺序保留在Chrome和旧版本的IE中，并创建了complete=complete属性。这当然破坏了我的JavaScript代码

因此，由于浏览器的解析器，我无法再回复定位。我将HTML输出为：

<img src="abcSmall.jpg" alt="Some Flowers" data-username="Mr Sausage" data-bigPhotoUrl="abcBig.jpg" data-UserId="31333205" photoUploadDate="25/05/2014">

因此，我现在必须遍历event.target.attributes的NamedNodeMap，但是我不确定创建具有html属性名称并获取属性值的变量的最佳方法是什么。老实说，我无法确定NamedNodeMap是数组还是对象？有人对循环使用event.target.attributes的NamedNodeMap并创建JS变量有什么建议吗？或者有没有更好的方法让我使用event.target[data username]从Javascript代码中获取这些变量，它似乎返回一个“undefined”

如果我的措辞真的很糟糕，请说出来，我会修改这个问题。

试试看

$("#wrapper").on("click", function(event) {
  if (event.target.nodeName === 'IMG') {
    var attrs = {};
    $.map([].map.call(event.target.attributes, function(_attr) {
      return [_attr.name, _attr.value]
    }), function(v) {
      var value = ["src", "alt", "username"
                   ,"bigPhotoUrl", "userId"
                   , "photoUploadDate"]
      , name = $.grep(value, function(val, idx) {
          return val.toLowerCase() === v[0].replace(/data-/, "")
        })[0];
      return attrs[name] = v[1]
    });
    // `attrs` : object having `key` : `attributes.name` ,
    // `value` : `attributes.value`
    // console.log(attrs)
  };
});

$wrapper.onclick，functionevent{ 如果event.target.nodeName=='IMG'{ var attrs={}； $.map[].map.callevent.target.attributes，函数属性{ 返回[\u attr.name，\u attr.value] }，函数v，k{ var值=[src，alt，username ，bigPhotoUrl，用户ID ，照片上载日期]， 名称=$.grepvalue、functionval、idx{ 返回val.toLowerCase===v[0]。替换/data-/， }[0]; 返回属性[name]=v[1] }; $pre.append+JSON.stringifyattrs，null，4 }; }; div{ 边框：4倍纯红； 宽度：100px； 高度：100px； } img{ 宽度：100px； 高度：100px； 背景：绿色； } 单击图像

---

我刚刚遇到了这个：还有这个

if(event.target.nodeName === 'IMG') {

      // this is src - event.target.attributes[0].value
      // this is alt - event.target.attributes[1].value
      // this is username - event.target.attributes[2].value
      // this is bigPhotoUrl - event.target.attributes[3].value
      // this is userId - event.target.attributes[4].value
      // this is photoUploadDate - event.target.attributes[5].value 

      // now i create HTML Nodes and Elements to pass as contents of a modal window using the items above

    }

$("#wrapper").on("click", function(event) {
  if (event.target.nodeName === 'IMG') {
    var attrs = {};
    $.map([].map.call(event.target.attributes, function(_attr) {
      return [_attr.name, _attr.value]
    }), function(v) {
      var value = ["src", "alt", "username"
                   ,"bigPhotoUrl", "userId"
                   , "photoUploadDate"]
      , name = $.grep(value, function(val, idx) {
          return val.toLowerCase() === v[0].replace(/data-/, "")
        })[0];
      return attrs[name] = v[1]
    });
    // `attrs` : object having `key` : `attributes.name` ,
    // `value` : `attributes.value`
    // console.log(attrs)
  };
});