Question

我需要一些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>

Answer 1

您需要执行以下操作：

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

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

该代码尚未经过测试，但我相信它将为您提供指导。

Answer 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')
                )

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

document.querySelectorAll('img.rsImg').forEach(n => 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>

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

2 个答案: