Изменение атрибута src по клику

93
25 ноября 2020, 18:20

Есть коллекция img с блюр эффектом с атрибутами например id="zero" и src="images/zeroblur.jpg" как в примере ниже, есть также папка с такими же картинками но без блюр эффекта, по клику на картинку срабатывает Target, с его помощью мы получаем id и src каждой картинки по которой собственно кликаем, затем мы сравниваем значение атрибута "id" с "src", и если они не равны то путь в "src" меняется с src="images/zeroblur.jpg" на src="images/zero.jpg", это дело работает, но вот когда опять кликаю, то путь не меняется обратно с src="images/zero.jpg" на src="images/zeroblur.jpg".

<img id="zero" src="images/zeroblur.jpg" alt=""> // при клике путь меняется на src="images/zero.jpg" что совпадает с ID, но когда еще раз кликаю, то не меняется обратно на src="images/zeroblur.jpg"
<img id="one" src="images/oneblur.jpg" alt="">
<img id="two" src="images/twoblur.jpg" alt="">
<img id="three" src="images/threeblur.jpg" alt="">
<img id="four" src="images/fourblur.jpg" alt="">
<img id="five" src="images/fiveblur.jpg" alt="">

let getImg = document.querySelectorAll('img');    
for (let i = 0; i < getImg.length; i++) {
    getImg[i].onclick = function (objTarget) {
        let imgTarget = objTarget.target;
        let imgId = imgTarget.id;
        let imgSrc = imgTarget.src;
        if (imgId !== imgSrc) {
            imgId = "images/" + imgId + ".jpg";
            imgTarget.src = imgId;
        } else {
            imgId = "images/" + imgId + "blur.jpg";
            imgTarget.src = imgId;
        }
    }
}
Answer 1

Дополнительный атрибут data-replace с самим изображением вместо id и заменяем значения в src при клике:

let getImg = document.querySelectorAll('img');     
for (let i = 0; i < getImg.length; i++) { 
    getImg[i].onclick = function (objTarget) { 
        let imgTarget = objTarget.target; 
        let imgClick = imgTarget.getAttribute('data-replace'); 
        let imgSrc = imgTarget.src; 
         
        imgTarget.setAttribute('data-replace',imgSrc); 
        imgTarget.setAttribute('src',imgClick); 
         
    } 
}
<img src="https://hsto.org/storage2/152/5ee/fe4/1525eefe4cbeb0480e33bfcf1312b8f1.png" data-replace="https://hsto.org/storage2/d9e/e9b/89e/d9ee9b89eec2c4b25fadacd07e3c0438.png" alt="test">

READ ALSO
Как правильно подключить script?

Как правильно подключить script?

Хочу использовать на своем сайте данный код с code pen:

126
Вставка данных на страницу с помощью ajax

Вставка данных на страницу с помощью ajax

На странице есть блок <div class="trading__buy-text" id="BS_title_balance"></div> В который текстом нужно динамически подгружать данные из БД Делаю следующим...

119
Настройка browserSync + Sass для Gulp 4

Настройка browserSync + Sass для Gulp 4

Вопрос в следующем: при обработке, browserSync фиксирует изменения sass файлов, но изменения в html не фиксируетПредполагаю, что ошибка в написании...

84
Как опустить кнопку вниз блока?

Как опустить кнопку вниз блока?

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100pxУ меня не получается это сделать, пробовал через position:absolute;...

95