如何将超链接链接到使用数据属性的 HTML5 <li> 图像

【问题标题】：How do I link a hyperlink to an HTML5 <li> image that uses data attributes如何将超链接链接到使用数据属性的 HTML5 <li> 图像
【发布时间】：2020-02-23 13:26:49
【问题描述】：

这是我最近一直在开发的响应式 HTML5 库。我只希望每张图片链接到不同的页面。

<ul class="gallery">

    <li>

    <div data-alt="img03" data-description="<h3>Project</h3>" data-max-width="1800" data-max-height="1350" >
    <div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>

    </div>

    </li>

我知道它应该像添加<a href="#"></a> 一样简单，但这不起作用。我愿意听取其他选择。

【问题讨论】：

data- 属性只是属性。它们不会向您的页面添加任何新功能。
当然。您建议如何链接此图片？
将其包裹在锚标签中或使用JS。

标签： html custom-data-attribute

【解决方案1】：

您可以使用.dataset（在所有主流浏览器中为currently supported）访问数据属性（data-*）中的值。 IE。要访问元素的属性data-src 的值，您可以编写：

var srcValue = varHoldingElemNode.dataset.src;   // or
var srcValue = varHoldingElemNode.dataset["src"];

也就是说，您可以使用一些 JS 来实现（我想）您想要的：将 <div data-src=<url_to_image>... 转换为链接到某个页面的图像。

另请参阅此short demo。

【讨论】：

它仍然不适合我。可以把JS发给你看看吗？
我一直在包装，但仍然没有任何反应
当然，发布代码总是有助于获得更多信息丰富的答案。
因此，当单击图像时，会打开一个单视图模式窗口。我正在尝试禁用单视图，而是将每个图像链接到一个页面。
我还是没看出问题:)