Как сделать из 25 функций одну? [закрыт]

123

13 декабря 2020, 23:20

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

На сайте есть 25 картинок, хотел чтобы при клике мишью по картинке она становилась большой, почти на весь екран. Впринципе мой код работает но на каждую картинку своя функция, тоесть 25 функций. Хотел сделать одну функцию для всех картинок. Создал массив изображений и пытался связать с функцией которая делает большими картинки, но код не работает. Подскажите пожалуйста как это реализовать?

Answer 1

Если есть код такого вида:

document.getElementsByClassName(" .. ")[0]...
document.getElementsByClassName(" .. ")[1]...
document.getElementsByClassName(" .. ")[2]...
...
document.getElementsByClassName(" .. ")[n]...

Используют циклы, которые по сути выполняют то же самое, только позволяют существенно сократить код. Один из них - for(); Его общий вид:

for( откуда начинаем считать, до какого числа считаем, как считаем ) { код }

А на реальном примере, это выглядит примерно так:

for( var i = 0; i < 5; i+=1 ) { 
  alert( 'На этом круге i равен: ' + i ); 
}

Код выше будет выполнять то же самое, что и этот:

alert( 'Бубу: 0' );
alert( 'Бубу: 1' );
alert( 'Бубу: 2' );
alert( 'Бубу: 3' );
alert( 'Бубу: 4' );

Созданная переменная i просто на каждом круге принимает определенное значение: Изначально равно = 0, после каждого круга увеличивается на +1 (i+=1), и так до тех пор, пока i продолжает оставаться меньше 5.

В вашем случае это будет выглядеть так:

var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

var modal = document.getElementById('myModal');
//Один раз создаем переменную, получаем элементы по классу.
var img = document.getElementsByClassName("foto-portfolio");
for( var i = 0; i < img.length; i++){
  //img.length = количество классов "foto-portfolio"
  //i++ короткая запись... это то же, что и i = i + 1 или i+=1;
  //Там могло бы быть и i+=2, i-- и т.п.
  img[i].addEventListener('click', function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  });
}

addEventListener - основной способ добавить событие ('click', 'input' и т.п.) на элемент. Он круче, чем onclick, потому что для одного элемента может быть куча разных addEventListener... а onclick будет работать только один. Если на один и тот же элемент добавить несколько onclick - работать будет только один.