Question

在我的页脚中，我有一堆字体真棒图标，可以在不同的社交媒体网站上显示我的个人资料。我还在我的网页上创建了一个模态，当你点击一个图像时，它基本上都集中在它上面。所以我的想法是用户可以点击Snapchat图标，我的Snapcode会弹出，以便用户可以获得它。与普通社交媒体不同，Snapchat不使用URL链接来查找用户配置文件。下面是我写的代码行我也会留下一个链接到我的网站，以便你可以看到我遇到的问题。

<i class="fa fa-snapchat w3-hover-text-yellow" src="apps/images/snapchat.png" onclick="onClick(this);" class="w3-hover-opacity"></i>

我的问题是，是否可以做这样的事情？我可以让我的功能正常工作我只是无法弄清楚如何隐藏图像，以便只有当用户点击链接时才能看到它。

我也尝试了类似的东西但仍无济于事。 toggleFunction（）只是将类名从w3-hide更改为w3-show，并且可以与其他元素一起使用。

<i class="fa fa-snapchat w3-hover-text-yellow">
<img src="apps/images/snapchat.png" class="w3-hide" style="width:100%" onclick="toggleFunction();onClick(this);" class="w3-hover-opacity" alt="">
</i>

如果有人能帮助我，我将不胜感激。只要你点击Snapchat图标，问题就会给我一个未定义的错误。

以下是该页面的链接。它在页脚中。 Snapchat图标。

Nerdislander.com

Answer 1

Data-src属性就是答案。非常感谢@Yulio指出它。

我稍微修改了代码，并修改了现有的功能。

<i class="fa fa-snapchat w3-hover-text-yellow" data-src="apps/images/snapchat.png" onclick="onClick2(this);" class="w3-hover-opacity" data-alt="Take a snap of my snapcode to add me on Snapchat!"></i>

接下来我更改了我的onClick函数以查找数据集。*而不是使用看起来像这样的src

function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}

function onClick2(element) {
document.getElementById("img01").src = element.dataset.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.dataset.alt;
}

我可以在i或span标记中放置src属性吗？

1 个答案: