Нужна помощь в добавлении rel в тег img с помощью js - PullRequest
Новая
       17

Нужна помощь в добавлении rel в тег img с помощью js

0 голосов
/ 21 мая 2019

Мне нужна помощь с 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>

Ответы [ 2 ]

1 голос
/ 21 мая 2019

Вам нужно сделать что-то вроде этого: 

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

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

Код не проверен, но я уверен, что он вам поможет.

0 голосов
/ 21 мая 2019

Похоже, что все изображения, которые вы хотите, помечены с помощью класса "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>
...