Question

我尝试在Polymer中创建一个灯箱组件，其子项是多个<img>标签。它们将包含src，这是一个缩略图和data-fullimage属性，它将包含完整尺寸图像的路径。

在Polymer组件中，我在图片内容选择器上设置了点击停留标签，使用sender.xyz的任何Javascript调用都会返回content标记，而不是图片标记，因此不允许我检索完整图像的路径。有没有办法获取被点击的图片的data-fullimage，如果需要，甚至是src值？

聚合物组件

imageClick: function(event, detail, sender) 
{
      console.log(sender);
}

实施

<paper-lightbox>
    <img src="img/one.png" data-fullimage="img/one-large.png"></img>
    <img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

Answer 1

无需在img代码上添加点击处理程序。此外，这不起作用，因为它们不受paper-lightbox元素中的函数约束。你想要的是

event.path[0].getAttribute("data-fullimage")

但这仅适用于轻型DOM元素只包含一个元素的情况。如果您的轻量级DOM元素更复杂，但应该可以在任何地方单击它们，请使用此表达式

event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")

Answer 2

试试这个

<强> HTML：

<paper-lightbox>
   <img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
   <img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

<强> JS：

imageTap: function(sender){
    var fullImage = sender.target.attributes["data-fullimage"];
}

从Polymer中获取发送方的数据值

2 个答案: