需要帮助使用 js 将 rel 添加到 img 标签答案

【问题标题】：Need help adding rel to an img tag using js需要帮助使用 js 将 rel 添加到 img 标签
【发布时间】：2019-05-21 00:04:46
【问题描述】：

我需要一些 JS 方面的帮助。我需要将rel="lightbox" 添加到下面代码的主图像中，以便这些图像将在灯箱中打开。我从检查器中获取了这段代码，这是由插件生成的，所以我不想编辑插件文件，而是想以另一种方式添加 rel 代码。我假设我可以通过 JS 添加它，但我发现没有任何效果。任何帮助将不胜感激。

<div class="rsOverflow" style="width: 786px; height: 544px;">
    <div class="rsContainer">
        <div style="z-index:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
             </div>
        </div>
        <div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
            </div>
        </div>
    </div>
    <div class="rsFullscreenBtn">
        <div class="rsFullscreenIcn"></div>
    </div>
</div>

【问题讨论】：

你用的是什么插件？他们可能有一个模板，您可以覆盖或挂钩到 add_filter 函数。
我正在使用 RoyalSlider。我询问了他们的支持，他们只说我需要使用 3rd 方灯箱插件，但不幸的是，他们没有提供有关如何实施它的说明。
我查看了他们的网站 - 有一个名为幻灯片标记编辑器的部分：dimsemenov.com/plugins/royal-slider/wordpress

标签： javascript wordpress lightbox

【解决方案1】：

你需要做这样的事情：

const imgs = document.querySelectorAll('img.rsImg')

for(let img of imgs){
  img.setAttribute('rel', 'lightbox');
}

代码未经测试，但我相信它会指导你。

【讨论】：

【解决方案2】：

看起来您想要的所有图像都标有“rsImg”类。
如果是这种情况，您可以选择具有该类的所有图像并为其添加“rel”属性...

document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
        .forEach(                      // for each of the things selected, run the code here
                 n => n.setAttribute('rel', 'lightbox')
                )

以下 sn-p 使用问题中的 html 运行该代码（图像已更改为占位符）——运行后，您可以使用浏览器检查元素并查看 rel属性被添加到每个img。

document.querySelectorAll('img.rsImg').forEach(n =&gt; n.setAttribute('rel', 'lightbox'))

<div class="rsOverflow" style="width: 786px; height: 544px;">
    <div class="rsContainer">
        <div style="z-index:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
             </div>
        </div>
        <div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage"
                     src=" //www.fillmurray.com/1008/1024"
                     style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
            </div>
        </div>
    </div>
    <div class="rsFullscreenBtn">
        <div class="rsFullscreenIcn"></div>
    </div>
</div>

【讨论】：