Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 29.10.2020
Сообщений: 89
1

Исправление скрипта: щелчок по изображению должен вызывать замену изображения и подписи под ним.

23.11.2021, 15:42. Показов 758. Ответов 2

Author24 — интернет-сервис помощи студентам
Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.Сделано.
Javascript
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
document.querySelector('figure').addEventListener('click',rodEl);
function rodEl(e){
    let tag = e.target.tagName;
    switch (tag) {
        case 'IMG':
            let url = e.target.src;
            switch (url) {
                case 'https://ltdfoto.ru/images/151a69f1d4fbbe183.jpg':
                    e.target.src = 'https://ltdfoto.ru/images/621bbe79b7944408a.png';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 1';
                break;
                case 'https://ltdfoto.ru/images/2d0b3bf6682205cd5.jpg':
                    e.target.src = 'https://ltdfoto.ru/images/53558905cba104ddb.png';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 2';
                break;
                    case 'https://ltdfoto.ru/images/3bb5f28dc03c2de37.png':
                    e.target.src = 'https://ltdfoto.ru/images/48c8ce77e65b45854.jpg';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 3';
                break;
                    case 'https://ltdfoto.ru/images/48c8ce77e65b45854.jpg':
                    e.target.src = 'https://ltdfoto.ru/images/3bb5f28dc03c2de37.png';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 4';
                break;
                    case 'https://ltdfoto.ru/images/53558905cba104ddb.png':
                    e.target.src = 'https://ltdfoto.ru/images/2d0b3bf6682205cd5.jpg';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 5';
                break;
                    case 'https://ltdfoto.ru/images/621bbe79b7944408a.png':
                    e.target.src = 'https://ltdfoto.ru/images/151a69f1d4fbbe183.jpg';
                    e.target.nextSibling.nextSibling.textContent = 'Картинка 6';
                break;
                default : alert('Неверный url картинки');
            }
        break;
        case 'FIGCAPTION':
            let color = e.target.style.color;
            switch (color) {
                case 'black':
                    e.target.style.color = 'darkturquoise';
                break;
                case 'darkturquoise':
                    e.target.style.color = 'black';
                break;
                default : alert('Неверное значение цвета');
            }
        break;
    }
}
В html коде вот так пишу
HTML5
1
2
3
4
<figure>
                            <img src="https://ltdfoto.ru/images/151a69f1d4fbbe183.jpg" alt="">
                              <figcaption style="color:black;">Картинка 1</figcaption> 
                        </figure>
HTML5
1
2
3
4
<figure>
                            <img src="https://ltdfoto.ru/images/2d0b3bf6682205cd5.jpg" alt="">
                            <figcaption style="color:black;">Картинка 2</figcaption> 
                        </figure>
Как мне исправить чтобы все мои изображения при нажатии меняли картинку и цвет.Сейчас работает только 1 изображение где Картинка 1.Картинка 2 не работает почему-то.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.11.2021, 15:42
Ответы с готовыми решениями:

Щелчок ПКМ должен вызвать циклическую смену изображения (3 изображения
Щелчок ПКМ должен вызвать циклическую смену изображения (3 изображения).

Создайте фотогалерею с использованием CSS свойств. Отредактируйте изображения и подписи к ним
Создайте фотогалерею с использованием CSS свойств. Отредактируйте изображения и подписи к ним

Aside идет после logo, хотя он должен идти под ним
Здравствуйте, нарисовал себе макет пытался сверстать, вроде бы простой, а сварил кашу =( 1:...

Здесь мне должен получит на экран : 2-PRG-2 NABIL37 И ПОД НИМ НЕ [?] А РЕЗУЛТАТЬ МАССИВА КОТОРЫ РАВНО = 6
Здесь мне должен получит на экран : 2-PRG-2 NABIL37 И ПОД НИМ НЕ А РЕЗУЛЬТАТ МАССИВА КОТОРЫ РАВНО...

setInterval должен вызывать лишь 1 экземпляр функции
Допустим, есть таймер, который вызывается довольно часто, скажем, раз в секунду, есть callback...

2
the hardway first
Эксперт JS
2470 / 1843 / 908
Регистрация: 05.06.2015
Сообщений: 3,608
23.11.2021, 15:48 2
Цитата Сообщение от Mikaelson135 Посмотреть сообщение
Javascript
1
document.querySelector('figure')...
Так вы получаете первый (и единственный) элемент <figure>. Либо получите их все .querySelectorAll(). Либо "повесьте" обработчик на общего "родителя" всех ваших figure.
0
0 / 0 / 0
Регистрация: 29.10.2020
Сообщений: 89
23.11.2021, 16:01  [ТС] 3
.querySelectorAll сделал но ничего не поменялось.

Добавлено через 9 минут
Javascript
1
2
3
for (var i = 0; i < 6; i++) {
    document.querySelectorAll('figure')[i].addEventListener('click',rodEl);
}
кароче сделал вот так работает и ладно.
0
23.11.2021, 16:01
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.11.2021, 16:01
Помогаю со студенческими работами здесь

Оформить галерею картинок и подписи к ним
Как оформить такой контент? Смотрите вложение. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...

Почему радиокнопки и подписи к ним меняются местами?
Код предусматривает поочередное следование радиокнопок и подписей к ним: &lt;td&gt;&lt;p...

Обязательно ли в конце скрипта вызывать exit?
Я не понял. Если не указать, скрипт в памяти останется или он додумается сам завершиться?

Поиск изображения по изображению
Здравствуйте! Собственно задали курсовую работу, по написанию программы каторая по образцу...

Исправление скрипта (ошибка только в IE)
Есть сайт, работает нормально везде, кроме интернет эксплорера. Пишет ошибку 'console' -...

Исправление бага работы скрипта
Здравствуйте. Есть сайт, на котором кое-что работает через одно место. Как это поправить - у меня...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru