Question

我有一个包裹在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">

但在Firefox和IE中，这就是

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

所以我在IE和Firefox中获取下面的属性值的方法现在没用了

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

    }

所以我现在必须遍历NamedNodeMap的{{1}}但是我不确定创建一个具有html属性名称的变量的最佳方法是什么，并获取属性的值。说实话，我无法确定event.target.attributes是数组还是对象？有任何关于循环NamedNodeMap NamedNodeMap并创建JS变量的建议，或者有更好的方法让我从Javascript代码中获取这些，使用event.target.attributes似乎返回{ {1}}

如果我的措辞非常糟糕，请说出来，我将修改这个问题。

Answer 1

尝试

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

＆＃13;

$("#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, k) {
      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]
    });
    $("pre").append("<br />" + JSON.stringify(attrs, null, 4))
  };
});

＆＃13;

div {
  border: 4px solid red;
  width: 100px;
  height: 100px;
}
img {
  width: 100px;
  height: 100px;
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
click image
<br />
<div id="wrapper" title="click">
  <img data-bigPhotoUrl="abcBig.jpg" data-username="Mr Sausage" alt="Some Flowers" data-UserId="31333205" photoUploadDate="25/05/2014" src="abcSmall.jpg" />
</div>
<pre></pre>

＆＃13;

使用NameNodeMap从Event Listener目标获取属性

1 个答案: