diff options
Diffstat (limited to 'files/ru/learn/javascript/building_blocks/image_gallery/index.html')
| -rw-r--r-- | files/ru/learn/javascript/building_blocks/image_gallery/index.html | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.html index 0c75cf24fc..e79c0d26db 100644 --- a/files/ru/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.html @@ -73,7 +73,7 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <ul> <li>Переберите все изображения, и для каждого вставьте элемент <code><img></code> внутри <code>thumb-bar <div></code>, который будет вставлять это изображение на страницу.</li> <li>Прикрепите обработчик <code>onclick</code> к каждому <code><img></code> внутри <code>thumb-bar <div></code>, чтобы при нажатии на них соответствующее изображение отображалось в элементе <code>display-img <img></code>.</li> - <li>Прикрепите обработчик <code>onclick</code> к кнопке <code><button></code>, чтобы при нажатии на нее к полноразмерному изображению был применен эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li> + <li>Прикрепите обработчик <code>onclick</code> к кнопке <code><button></code>, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li> </ul> <p>Чтобы лучше понять идею, посмотрите на <a href="https://mdn.github.io/learning-area/javascript/building-blocks/gallery/">готовый пример</a> (не заглядывая в исходный код!).</p> @@ -98,9 +98,9 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <p>В каждой итерации цикла вам нужно добавить обработчик <code>onclick</code> к текущему <code>newImage</code>:</p> <ol> - <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code><img></code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведет к тому, что значение <code>src</code> последнего <code><img></code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code><img></code> является целью обработчика. Как получить информацию от объекта события?</li> + <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code><img></code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение <code>src</code> последнего <code><img></code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code><img></code> является целью обработчика. Как получить информацию от объекта события?</li> <li>Запустите функцию, передав ей возвращаемое значение <code>src</code> в качестве параметра. Вы можете вызвать эту функцию, как хотите.</li> - <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img <img></code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code><img></code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определенная именованная функция.</li> + <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img <img></code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code><img></code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определённая именованная функция.</li> </ol> <h3 id="Написание_обработчика_который_запускает_кнопку_затемнения_подсветки">Написание обработчика, который запускает кнопку затемнения / подсветки</h3> @@ -110,7 +110,7 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <ol> <li>Проверяет текущее имя класса, установленное на кнопке <code><button></code> — для этого снова можно использовать <code>getAttribute()</code>.</li> <li>Если имя класса <code>"dark"</code>, изменяет класс <code><button></code> на <code>"light"</code> (с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba (0,0,0,0.5)"</code>.</li> - <li>Если имя класса не «темное», изменяет класс <code><button></code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba(0,0,0,0)"</code>.</li> + <li>Если имя класса не «тёмное», изменяет класс <code><button></code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba(0,0,0,0)"</code>.</li> </ol> <p>Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.</p> |