Как упростить скрипт с помощью this?

Question

[ilyasidorchik]

У меня на странице есть фото:

<img src="img/5.jpg" id="comfort1" onclick="scale()">

Я кликаю на него — появляется увеличенное фото:

<div class="imger" id="comfort1zoomed" onclick="scale()">
	<div class="layout-positioner">
		<img src="img/5.jpg">
	</div>
</div>

Кликаю на увеличенное — оно исчезает:


Я только учусь, поэтому делаю это следующим скриптом:

function scale() {
	var img = document.getElementById("comfort1");
	var imgz = document.getElementById("comfort1zoomed");
	if (imgz.style.display != "block") imgz.style.display = "block";
	else imgz.style.display = "none";
}

Как упростить скрипт?

Страница

UPD
В комментариях сказали, что вешать на каждую картинку функцию через HTML — плохой тон. Я почитал о делегировании, переписал скрипт. Почему не работает?

var page = document.getElementById("page");
var imgz = document.getElementById("comfort1zoomed");
page.onclick = function(event) {
	var target = event.target; // где был клик?
	if (target.id == 'comfort1') // клик был на фото c id="comfort1"
		imgz.style.display = "block"; // сделать видимой нужную увеличенную фото
};

Comments

[DanKud]

Тут нечего упрощать, потому что проще некуда. Конструкция this используется внутри классов при объектно-ориентированном программировании. К вашему коду это отношения не имеет :)

[ilyasidorchik]

DanKud, просто теперь мне надо сделать увеличение по клику всех фотографий на странице. Я вот думал, что this мне поможет.

[ilyasidorchik]

DanKud, переписал код — обновил в конце вопроса. Почему не работает? Зачем вообще ставить точку запятой после функции?)

Answer 1

[s-jet]

let images = document.querySelectorAll('.container img');

Array.prototype.forEach.call(images, function(el) {
        el.addEventListener("click", function(event) { 
            //делай с картинками все что хочешь
        });  
});

Comments

[ilyasidorchik]

Спасибо, но, извините, не совсем понял.

Мне нужно, чтобы при клике на картинку с id="comfort1" появлялся блок с id="comfort1zoomed":

var imgz = document.getElementById("comfort1zoomed");
imgz.style.display = "block";

Куда это засунуть в ваш код?

[s-jet]

ilyasidorchik, Работайте с атрибутами, зачем вам сразу выгружать на страницу все фотки в двух разрешениях? Логика примерно такая: https://jsfiddle.net/svpx5kjh/3/ подробнее просто времени нет сейчас писать, но я думаю вы поймете.

[ilyasidorchik]

s-jet, ну вот мне нужно при клике на картинку сделать видимым блок с id="comfort1zoomed":

Я попробовал сделать это с вашим скриптом, но при клике не появляется блок с id="comfort1zoomed" :-(

let images = document.querySelectorAll('.content img');
Array.prototype.forEach.call(images, function(el) {
	el.addEventListener("click", function(event) {
		var imgz = document.getElementById("comfort1zoomed");
		imgz.style.display = "block";
	});
});

Почему не работает? Вот страница

[s-jet]

ilyasidorchik,
Оберните этот код в

window.onload=function(){

}

[ilyasidorchik]

s-jet, заработало, спасибо!

Как теперь определять по какой фотографии кликнул пользователь? Если он кликнет по фото с id="comfort1", у меня будет одно действие, если по фото с id="comfort2" — другое.

[s-jet]

ilyasidorchik, id у элемента тоже атрибут el.getAttribute('id'). Но если вы просто хотите по клику увеличивать картинки, ваш подход не правильный