мета-данные страницы
  •  
Загрузка не удалась. Возможно, проблемы с правами доступа?

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
Следующая версияСледующая версия справа и слева
javascript:ex [09/11/2017 10:40] – [Урок 5.1: Создаем свой спойлер] vlasovjavascript:ex [09/11/2017 12:19] – [Урок 5.1: Создаем свой спойлер] vlasov
Строка 413: Строка 413:
       nxt.style.display = "none";       nxt.style.display = "none";
 </code> </code>
-во-первых, ''nxt = getNext(alldiv[j])'' получаем ссылку на следующий контейнер (сестринский элемент), перебираем их все, проверяя, чтобы у него был класс ''spoiler'': +во-первых, с помощью ''nxt = getNext(alldiv[j])'' получаем ссылку на следующий контейнер (сестринский элемент), перебираем их все, проверяя, чтобы был в наличии класс ''spoiler'':
 <code javascript> <code javascript>
 while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)}; while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 </code> </code>
 +Для найденного элемента ''nxt'' устанавливаем требуемое стилевое оформление:
 +<code javascript>
 +      nxt.style.border = "dotted black";
 +      nxt.style.backgroundColor = "aqua";
 +      nxt.style.display = "none";
 +</code>
 +где самое главное для нас -- скрытое по умолчанию состояние спойлера: ''<nowiki>nxt.style.border = "dotted black"</nowiki>''
 +
 +И, наконец, рассмотрим функцию-обработчик клика, которая и осуществляет работу спойлера.
 +Строки вроде таких
 +<code javascript>
 +  var nxt = getNext(this);
 +  while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
 +</code>
 +мы уже обсуждали.
 +
 +Команда
 +<code javascript>
 +  console.log("check: ",  nxt.style.display);
 +</code>
 +позволяет нам осуществить запись в лог значения ''nxt.style.display''.
 +Наконец, проверяем
 +<code javascript>
 +  if (nxt.style.display == "none")  {nxt.style.display = "block"; console.log("set=",nxt.style.display); return};
 +  if (nxt.style.display == "block" || !nxt.style.display) {nxt.style.display = "none";  console.log("set=",nxt.style.display)};
 +</code>
 +состояние значения ''nxt.style.display'' и соответственно переобпредляем это значение на противополжное (отдельная забота о случае, если pyfxtybt ''nxt.style.display'' не определено).
  
 +Код базируется на примерах, взятых из книги Резинга, создателя пакета ''jquery''; разность стилей в выполнении однотипных задач определяется ленью и забывчивостью...
 ===== Урок 6: динамическое изменение картинок и события задержки ===== ===== Урок 6: динамическое изменение картинок и события задержки =====
  
Строка 460: Строка 487:
  
       var nxt = getNext(alldiv[j]);       var nxt = getNext(alldiv[j]);
-      while ( nxt.className != "spoiler" ) {nxt = getNext(alldiv[j])};+      while ( nxt.className != "spoiler" ) {nxt = getNext(nxt)};
       nxt.style.border = "dotted black";       nxt.style.border = "dotted black";
       nxt.style.backgroundColor = "aqua";       nxt.style.backgroundColor = "aqua";