Не выезжает блок сбоку

@macr · Регистрация: 27.11.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте, у меня есть такой код, и по задумке при нажатии на картинку выезжает блок перекрывающий все картинки, но он не появляется, что неправильно?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>пункт 3</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='products' class="sections_description">
  <div id='section_tax' class ="sections">
      <div class="blocks">
    <div class="section_caption">
        <img src="img/JQuery.jpg" alt="">
    </div>
    <div class="section_caption">
        <img src="img/react.png" alt="">
        </div>
    <div class="section_caption">
        <img src="img/AngularJS.jpg" alt="">
      </div>
      <div class="blocks">
    <div class="section_caption">
        <img src="img/Vue.jpg" alt="">
    </div>
    <div class="section_caption">
        <img src="img/Ember.png" alt=""></div>
    <div class="section_caption">
        <img src="img/Knockout.jpg" alt=""></div>
          </div>
    <div class="section_caption" onclick="toggleVisibility('description_debt');">
 <div class='description_blocks'>
 <div class='description'>
        <p>Самая популярная js-библиотека всех времен. Она произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и ajax-запросы.
        В последнее время jQuery утрачивает былую популярность, но по-прежнему остается жизнеспособным вариантом для проектов, требующих небольшого js-функционала.</p>
        <p>Плюсы:
        Малый размер дистрибутива,
        низкий порог вхождения, исчерпывающая документация в интернете,
        лаконичный синтаксис,
        легко расширяемый.</p>
        <p>Минусы:
        замедляет работу приложения,
        может повлечь проблемы совместимости с браузером,
        сообщество разработчиков протестует против его повсеместного использования.</p>
 
 </div>
  <div class='description'>
        <p>
        Самая горячо обсуждаемая библиотека прошедшего года. React претендует на роль библиотеки для создания пользовательских интерфейсов. Он фокусируется на «View»-части MVC-разработки и позволяет создавать компоненты интерфейса, сохраняющие свое состояние. Это была одна из первых библиотек, реализующих виртуальное DOM-дерево.
        Статистика использования React может показаться довольно низкой из-за того, что он используется в основном в приложениях, а не на сайтах.</p>
        <p>
        Плюсы:
        Компактность, эффективность, производительность и гибкость,
        простая модель компонентов,
        хорошая документация и обилие онлайн-ресурсов,
        возможность рендеринга на стороне сервера,
        растущая популярность.  
        </p>
        <p>
        Минусы:
        новые концепции и синтаксис, которые придется изучить,
        необходимы системы сборки,
        может требовать сторонних инструментов и библиотек,
        может быть несовместим с кодом и другими библиотеками, модифицирующими DOM-дерево.   
        </p>
 </div>
  <div class='description'>
      <p>Первый фреймворк (или MVC фреймворк) в нашем списке. Наиболее популярной является версия 1.х, расширяющая HTML двусторонней привязкой данных одновременно с разделением манипуляций с DOM и логики приложения.
      Angular 1.x до сих пор находится в разработке, несмотря на версию 2 (которая теперь версия 4!
      </p>
      <p>
      Плюсы:
      популярный фреймворк, поддерживаемый несколькими крупными компаниями,
      универсальное решение для создания современных веб-приложений,
      часть «стандартного» стека MEAN (MongoDB, Express.JS, AngularJS, NodeJS), доступны множество статей и туториалов.
      </p>
      <p>
      Минусы:
      сложнее в освоении в сравнении с некоторыми альтернативами,
      обширная база кода,
      несовместимость с Angular 2.x,
      несмотря на то, что является проектом Google, самим Google не используется.
      </p>
 </div>
  <div class='description'>
      <p>Легкий современный фреймворк для создания пользовательских интерфейсов. Предлагает React-подобный виртуальный слой ст поддержкой DOM, который может быть интегрирован с другими библиотеками.
      Vue.js использует синтаксис шаблона HTML для связки DOM и данных. Модели являются простыми js-объектами, которые перестраивают интерфейс и/или контент при изменении данных.</p>
      <p>
        Плюсы:
        зрительские симпатии и растущая популярность,
        прост в освоении с нуля,
        мало зависимостей и хорошая производительность.
      </p>
      <p>Минусы:
      молодой проект — высокие риски,
      меньше ресурсов, чем у альтернатив.</p>
 </div>
  <div class='description'>
      <p>Один из крупнейших фреймворков, основанных на модели MVVM. Он реализует шаблонизацию, связывание данных и библиотеки.</p>
      <p>Плюсы:
        единое решение для клиентских приложений,
        позволяет разработчикам быть продуктивными (использует jQuery),
        хорошая обратная совместимость,
        одобряется современными стандартами веб-разработки.</p>
        <p>Минусы:
        большой дистрибутив,
        считается монолитным по сравнению с другими фреймворками, основывающимися на модульной модели,
        непрост в изучении.</p>
 </div>
  <div class='description'>
      <p>Старейший MVVM фреймворк, использующий обозреватели для отслеживания состояния интерфейса. Поддерживает шаблонизацию и отслеживание зависимостей.</p>
      <p>Плюсы:
    легковесный и не имеет зависимостей,
    прекрасная поддержка браузеров вплоть до IE6,
    хорошая документация.</p>
    <p>Минусы:
    вносит излишнюю сложность в большие проекты,
    разработка замедлилась,
    популярность сходит на нет.</p>
 </div>
 </div>
 </div>
    <script>
 document.querySelectorAll('.section_caption').forEach((el, i)=> el.onclick =()=> querySelectorAll('.description')[i].style.left = 0);
  document.querySelectorAll('.description').forEach(el=> el.onclick =()=> el.style.left = '-120%');
</script>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.sections {
        margin: 0 auto;
        height: 100%;
        width: 90%;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        z-index: 1;
        position: relative;
 
    }
    .blocks {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
 
    }
 
    .section_caption {
        height: 150px;
        width: 20%;
        display: flex;
        justify-content: center;
        background: white;
        flex-flow: row nowrap;
        margin: 2% ;
        cursor: pointer;
    }
 
    .description {
        display: block;
        position: absolute;
        top: 0;
        left:-110%;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.8);
        z-index: 5;
        transition: 5s;
    }
    .description p{
        font-size: 22px;
        color: #fff;
        margin-left: 10px;
    }

@j2FunOnly · 15.12.2017, 08:48

Сообщение от macr

что неправильно?

Рано вам для однострочных функций (да и зачем? только читать неудобно

). Вы сами себя запутываете. И смотрите в консоль, ясно понятно написано: Uncaught ReferenceError: querySelectorAll is not defined at HTMLDivElement.el.onclick

JavaScript
1
2
3
4
5
6
7
8
9
10
11
document.querySelectorAll('.section_caption').forEach((el, i) => {
  el.onclick = () => {
    document.querySelectorAll('.description')[i].style.left = 0; // ошибка была тут
  }
});
 
document.querySelectorAll('.description').forEach(el => {
  el.onclick = () => {
    el.style.left = '-120%'
  }
});

https://jsfiddle.net/0s6ayqkp/

P.S. NodeList#forEach() не будет во всех браузерах работать.

@macr · 15.12.2017, 16:28 **[ТС]**

Cпасибо большое)
Да может и рано, но я пытаюсь разобраться, а оно как-то не особо идёт.

@klopp · 16.12.2017, 07:49

Что-то я подзапутался:
1.Попробовал решить эту задачку через getElementsByClassName('section_caption'), и обычный цикл for

JavaScript
1
2
3
4
5
6
var pic = document.getElementsByClassName('section_caption');
var descr = document.getElementsByClassName('description');
for(i = 0; i < pic.length; i++){
    pic[i].onclick = () => descr[i].style.left = 0;
    descr[i].onclick = () => descr[i].style.left = -120 + 'px';
}

консоль выдаёт ошибку Uncaught TypeError: Cannot set property 'left' of undefined, т.е. переменная descr[i] получается не определена? А почему? Посмотрел через цикл содержимое pic[i].onclick и везде () => descr[i].style.left = 0; , вот, собственно и вопрос: А почему не меняется индекс i? Ведь должно быть
() => descr[0].style.left = 0;, далее
() => descr[1].style.left = 0;, далее
() => descr[2].style.left = 0; и т.д.
Как вылечить?

@j2FunOnly · 16.12.2017, 09:43

klopp, получается что у объекта descr[i] нет свойства style, что странно.

И вы попались на том, что цикл for не создает область видимости для объявленных переменных (причем у вас i - глобальная, всегда используйте strict режим):

HTML5
1
2
3
<button class="button" data-custom="1">Button</button>
<button class="button" data-custom="2">Button</button>
<button class="button" data-custom="3">Button</button>

JavaScript
1
2
3
4
5
var btns = document.getElementsByClassName('button');
 
for (i = 0; i < btns.length; i++) {
  btns[i].onclick = () => console.log(i);
}

Как вы думаете что будет в консоли при клике по кнопкам? Всегда будет выведено значение i, которое на момент выполнения обработчика будет равно 3, в данном случае.
https://jsfiddle.net/p88cv69j/

В ES6 ввели определения переменных let и const, т. к. вы используете "fat-arrow" синтаксис для объявления функций, можно воспользоваться этой фишкой:

JavaScript
1
2
3
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = () => console.log(i);
}

Как и ожидалось при клике на кнопках будет выводиться i равный значению на момент определения обработчика.
https://jsfiddle.net/p88cv69j/1/

По старинке пришлось бы назначение обработчиков обернуть в функцию: "Каждая функция обладает собственной областью видимости переменных. И чтобы создать область видимости переменных необходимо создать функцию"

Every function has a scope. And to create scope you have to create function. (с)

Не помню где прочитал, к сожалению не смог найти сейчас эту книгу.

JavaScript
1
2
3
4
5
6
7
for (var i = 0; i < btns.length; i++) {
  (function(index) {
    btns[index].onclick = function() {
      console.log(index)
    };
  })(i);
}

https://jsfiddle.net/p88cv69j/2/

Добавлено через 1 минуту

Не по теме:

для чего-то я создавал data-custom для кнопок, не помню уже :) не обращайте внимания

@klopp · 16.12.2017, 09:55

Сообщение от j2FunOnly

получается что у объекта descr[i] нет свойства style, что странно.

нет,там получилось не определен сам объект descr[i], а точнее, i всегда равен descr.length, т.е. где итератор остановился после цикла, и указывает на несуществующий элемент,как вы чуть ниже и подметили.

Сообщение от j2FunOnly

И вы попались на том, что цикл for не создает область видимости для объявленных переменных

Не знал об этом,благодарю.И в учебниках как-то не попадалось. Но когда я попробовал применить forEach

JavaScript
1
2
3
4
var pic = document.getElementsByClassName('section_caption');
var descr = document.getElementsByClassName('description');
pic.forEach((el,i) => {el.onclick = () => descr[i].style.left = 0;});
descr.forEach((el,i) => {el.onclick = () => descr[i].style.left = -120 + 'px';})

консоль выдаёт ошибку Uncaught TypeError: pic.forEach is not a function
причем,если поменять document.getElementsByClassName на document.querySelectorAll то всё работает. Разница в том что в первом случае pic и descr это HTMLCollection а во втором NodeList ?

@j2FunOnly · 16.12.2017, 10:06

Сообщение от klopp

Разница в том что в первом случае pic и descr это HTMLCollection а во втором NodeList ?

Совершенно верно. Плюс функция forEach() - это функция Array, по стандарту. Вам просто повезло что Firefox/Chrome реализовали эту функцию для NodeList. В IE это работать не будет.

Сообщение от klopp

а точнее, i всегда равен descr.length

А странность в том, что тогда была бы ошибка примерно такая: "cannot read property style of null/undefined", но мне лень сейчас с этим разбираться, как всегда

@klopp · 16.12.2017, 10:08

Сообщение от j2FunOnly

была бы ошибка примерно такая

выдавала консоль и такие и такие ошибки,я уже подзапутался когда какие,ибо вариантов перебрал с десяток))

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@macr 0 / 0 / 0 Регистрация: 27.11.2017 Сообщений: 84
	15.12.2017, 16:28 [ТС]
	Cпасибо большое) Да может и рано, но я пытаюсь разобраться, а оно как-то не особо идёт. 0

Не выезжает блок сбоку

Решение