将 rel="lightbox" 添加到图像（由 javascript/jquery 强制）答案

【问题标题】：Add rel="lightbox" to image (forced by javascript/jquery)将 rel="lightbox" 添加到图像（由 javascript/jquery 强制）
【发布时间】：2013-06-09 13:59:59
【问题描述】：

在我的网站上，我有一张图片。我尝试添加一个 rel="lightbox" 因为我想在单击时在 Lightbox 中打开图像。但我无法更改这部分 HTML 代码。是否有另一种解决方案来“强制”使用 Javascript 或 jQuery 之类的 rel？

这是我要添加 rel="lightbox" 的 HTML 代码

<div class="gv_panel" style="width: 240px; height: 290px;">
<img style="visibility: visible; " src="t-shirt.jpg">
</div>

有什么解决办法吗？

【问题讨论】：

标签： javascript jquery lightbox rel

【解决方案1】：

使用 jQuery，您可以使用 attr 函数来做到这一点：

$( '.gv_panel img' ).attr( 'rel', 'lightbox' );

并且仅使用 Javascript：

document.querySelector( '.gv_panel img' ).rel = 'lightbox';

但请注意，IE 仅从 8+ 版本支持document.querySelector。因此，如果您需要支持 IE7，您应该改用 getElementById 或其他方式。

【讨论】：

我尝试了以下代码，但它不起作用。我在这里做错了吗？
代码看起来不错。不要忘记你需要在这段代码之后初始化你的lightbox。因为如果你早点初始化它lightbox 脚本就不会知道新的rel's
感谢您的回答，我尝试将代码移到网页上更高的位置，但仍然无法正常工作。请您看看我的网站吗？ jaewhooclothing.com/collection/jae-whoo-limited-t-shirt-design
$ 未定义 - 这是我在浏览器控制台中看到的。所以你需要使用jQuery.而不是$.
使用控制台的好主意，我试图更改 jQuery 中的 $，但现在控制台告诉我：“jQuery 未定义”