Есть коллекция 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;
}
}
}
Дополнительный атрибут 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">
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
На странице есть блок <div class="trading__buy-text" id="BS_title_balance"></div> В который текстом нужно динамически подгружать данные из БД Делаю следующим...
Вопрос в следующем: при обработке, browserSync фиксирует изменения sass файлов, но изменения в html не фиксируетПредполагаю, что ошибка в написании...
Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100pxУ меня не получается это сделать, пробовал через position:absolute;...