JavaScript и jQuery. То же самое… но другое. PS2 и PS4… То же самое… но совсем не то.
В эту среду мы изучили основы jQuery… только что поняв архаичные и сложные способы JavaScript… О, циклы for – это так просто! Я занимаюсь этим уже больше года на Codecademy или других простых онлайн-ресурсах… но ничто по сравнению с этим.
Я только что понял, что кажется несколько сложным вложением двух методов forEach для нашего задания на выходные!
Мы должны создать «одностраничное приложение», которое показывает 6 альбомов на главной странице. Когда вы нажимаете на любой альбом, вы переходите к сохраненным изображениям этого альбома. Нажмите на одно из изображений, и оно покажет вам изображение вблизи и ничего больше… Я организовал свои изображения и данные в объектно-подобном массиве — (произносится как «воздушный луч» или «э-э-луч… !) — и у каждого объекта есть свой вложенный объект со своим списком фотографий и подписями к ним. Вот вложенный метод forEach:
$boxBtn.on('click', function(){
// Это добавляет класс на домашнюю страницу, который отображает все элементы. В CSS для них задано значение ' display: none;'
$homePage.addClass('hidden');
//этот forEach просматривает мои данные и выбирает каждый объект в массиве… затем я нацелюсь на конкретный объект в массиве, который мне нужен (файлы изображений для каждого альбома)
var $imagesPage = data.forEach(function(object, index, arr){
// это делает изображения объектами и сохраняет их в переменной ‘imgObjs’
var imgObjs = object.imgCollection;
//Этот forEach перебирает объект изображения (imgObjs) и выводит изображение и соответствующий ему заголовок! Вот почему я выбрал «изображение» и «заголовок» в качестве аргументов для этого метода
imgObjs.forEach(function(image, caption){
//этот imgBox просто нацелен на предустановленную переменную. Это сделает так, что мой div с изображениями/ссылками/p/и т. д. будет отображаться на странице, когда эта функция запускается (пользователем, когда он/она нажимает на определенный альбом)
var $imgBox = $(photoBox);
//эти следующие две строки просто гарантируют, что правильная информация (мои ссылки на изображения и подписи к изображениям) сохранена в правильном элементе html. Мне пришлось дважды использовать .children() для источника img, потому что тег ‹img /› вложен в тег привязки в html…
$imgBox.children('a') .children('img').attr('src', image.src);
$imgBox.children('p').text(image.caption);
//это просто добавляет новый контент imgBox (который он получил из двух строк выше) к его родительскому html, который я назвал 'divParent'.
divParent.prepend( $imgBox);
});
});
