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

Функция смены картинки по нажатию на элементы

13.02.2022, 20:26. Показов 763. Ответов 8

Author24 — интернет-сервис помощи студентам
Приветствую.

Подскажите, пожалуйста, каким образом стоит правильно оформить код у данной функции? Не могу всё никак додуматься.

Основной смысл того, что происходит до и внутри функции:

Я создаю переменные со значениями правого и левого "селекторов", затем, указываю переменную с элементом на ссылку картинки (где она находится в DOM-структуре html-страницы), создаю массив с ссылками других картинок, чтобы в будущем их можно было изменять на простой клик мышкой по правому и левому "селекторам".
В самой функции, я записываю два условных оператора if, где 1 - left_side, а 2 - right_side, а также, создаю цикл for для перебора массива с ссылками на картинки.

А вот дальше я не особо понимаю - каким образом мне правильно отрегулировать их появление с помощью правого и левого "селекторов".
Вложение с картинкой и кодом приложу ниже, спасибо заранее за помощь!

JavaScript-структура:

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
// Change Character Function
let lSideChange = document.querySelector('.to_left_side');
let rSideChange = document.querySelector('.to_right_side');
let checkerValue = document.querySelector('.char___img').src;
let charConfig = ['images/characters/sans.png', 
'images/characters/fell_sans.png', 
'images/characters/dust_sans.png', 
'images/characters/smile_sans.png'];
 
lSideChange.addEventListener('click', ChangeChar);
rSideChange.addEventListener('click', ChangeChar);
 
function ChangeChar(event) {
    if (event.currentTarget.className == 'to_left_side') {
        for (let index = 0; index < charConfig.length; index++) {
            if (charConfig[index] === checkerValue) {
                
            }
        }
    }
 
    if (event.currentTarget.className == 'to_right_side') {
        for (let index = 0; index < charConfig.length; index++) {
            if (charConfig[index] === checkerValue) {
                
            }
        }
    }
}
Изображения
 
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
13.02.2022, 20:26
Ответы с готовыми решениями:

Таймер смены картинки
Доброго времени суток. Нужна помощь Пишу программу тестирования. Есть форма, на которой...

Подключение плавной смены картинки
Использую следующий скрипт для плавной смены картинки в header`е: &lt;script...

Bxslider, свои кнопки для смены картинки
Кто использует это слайдер подскажите, не работают кнопки переключатели картинок (next, prev) , по...

Скрипт смены картинки фона при клике
Скрипт смены картинки фона при клике! помогите пожалуйста, заранее спасибо!!!

Перестали отображаться картинки после смены имени пакета
Привет всем! Я новенький Android dev. Писал приложение и нужно было сменить имя пакета. Сделал все...

8
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
13.02.2022, 21:57 2
А что это за переменная?
Javascript
1
let checkerValue = document.querySelector('.char___img').src;
Вы просто хотите менять адрес статической картинке, нажимая на кнопки право/лево, и в зависимости от кнопки, передвигаться по индексам массива с адресами charConfig вперёд/назад. Я правильно понимаю?
1
1 / 1 / 0
Регистрация: 09.02.2022
Сообщений: 22
13.02.2022, 22:21  [ТС] 3
Да, правильно понимаете.

Эта переменная - сама картинка в DOM-структуре. (тоесть её нужно менять из конфига на право-лево)

Просто я записал её наименование не особо логично, думаю, можно поменять.
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
13.02.2022, 23:37 4
Лучший ответ Сообщение было отмечено Kurio как решение

Решение

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
// Change Character Function
let lSideChange = document.querySelector('.to_left_side'),
    rSideChange = document.querySelector('.to_right_side'),
    checkerValue = document.querySelector('.char___img'),
    charConfig = [
        'images/characters/sans.png', 
        'images/characters/fell_sans.png', 
        'images/characters/dust_sans.png', 
        'images/characters/smile_sans.png'
    ];
 
[lSideChange, rSideChange].forEach(e => e.addEventListener('click', ChangeChar));
 
function ChangeChar(e) {
    let src = checkerValue.getAttribute('src'),
        index = charConfig.indexOf(src);
    
    if(index !== -1) {
        if(e.currentTarget.classList.contains('to_left_side')) {
            if(index === 0) checkerValue.src = charConfig[charConfig.length - 1];
            else checkerValue.src = charConfig[index - 1];
        }
        if(e.currentTarget.classList.contains('to_right_side')) {
            if(index === charConfig.length - 1) checkerValue.src = charConfig[0];
            else checkerValue.src = charConfig[index + 1];      
        }       
    }
    else checkerValue.src = charConfig[0];
}
0
1 / 1 / 0
Регистрация: 09.02.2022
Сообщений: 22
13.02.2022, 23:49  [ТС] 5
Очень интересное решение)
Спасибо)
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
13.02.2022, 23:52 6
Цитата Сообщение от Kurio Посмотреть сообщение
Очень интересное решение)
Работает хоть? )
0
1 / 1 / 0
Регистрация: 09.02.2022
Сообщений: 22
13.02.2022, 23:56  [ТС] 7
Да, всё работает.
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
14.02.2022, 00:04 8
Кстати, пока не забыл, доставать значение src вот таким образом - плохая затея...
Javascript
1
let checkerValue = document.querySelector('.char___img').src;
Вы получите полный путь к картинке с протоколом и всеми patch-ами. Если имеете дело с относительными адресами изображений, то лучше использовать метод...
Javascript
1
img.getAttribute('src')
1
1 / 1 / 0
Регистрация: 09.02.2022
Сообщений: 22
14.02.2022, 00:22  [ТС] 9
Да, из-за этого у меня и не получалось нормально получить ссылку, чтобы ею манипулировать в будущем. Поэтому и появились проблемы)
Благодарю.
0
14.02.2022, 00:22
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
14.02.2022, 00:22
Помогаю со студенческими работами здесь

Действия по нажатию на картинки
Нужно реализовать что-то подобное как на картине. Я так понимаю нужно на форме поместить главное...

Смена картинки по нажатию
Доброго всем времени суток! Прошу тапками не кидаться, я только учусь. В общем, какая проблема:...

Изменение картинки по нажатию
&lt;html&gt; Не могу знаю как по нажатию на картинку она менялась &lt;head&gt; &lt;meta http-equiv=Content-Type...

Увеличение картинки по нажатию
Привет всем подскажите как сделать так что бы при нажатию на картинку картинка увеличивалась в...

Массив,функция смены элементов
Доброго времени суток, уважаемые. Имеется проблема с написанием функции, которая бы находила и...

Функция смены текста по клику
Есть div со своим id, нужно по клику вызвать функцию, которая бы проверяла цвет и делала примерно...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
КуМир: решение задач на строки
bytestream 28.01.2025
В системе программирования КуМир работа со строковыми данными является одним из важнейших аспектов создания программ. Строки представляют собой последовательности символов, заключенные в кавычки,. . .
КуМир: решение геометрических задач
bytestream 28.01.2025
Программирование геометрических задач в среде КуМир становится всё более актуальным в обучении школьников и студентов. КуМир — это разработанная в России обучающая программная среда, предназначенная. . .
КуМир, исполнитель Водолей: Задачи и решения
bytestream 28.01.2025
КуМир — это образовательная среда для обучения программированию. Она предлагает пользователям разнообразные инструменты для разработки и отладки программ, что особенно ценно для студентов и. . .
КуМир, исполнитель Чертежник: Решение задач
bytestream 28.01.2025
КуМир (Комплект Учебных МИРов) представляет собой образовательную среду для обучения основам программирования и алгоритмизации. Исполнитель Чертежник работает на координатной плоскости, где может. . .
Rust или Go? А может C++?
hw_wired 28.01.2025
С каждой новой технологией или методологией появляются новые языки программирования, призванные решать конкретные задачи либо улучшать аспекты производительности и безопасности. Среди множества. . .
Fortran и WinAPI: как создать приложение с графическим интерфейсом
hw_wired 28.01.2025
Fortran — это один из старейших высокоуровневых языков программирования, широко используемый в науке и инженерии уже несколько десятилетий. Его название происходит от "Formula Translation" (перевод. . .
Списки в Haskell
hw_wired 28.01.2025
Haskell является функциональным языком программирования, который отличается лаконичностью синтаксиса и мощными абстракциями. Важным концептом в Haskell являются списки — упорядоченные коллекции. . .
Функции высшего порядка в Haskell
hw_wired 28.01.2025
Haskell – это современный функциональный язык программирования, который получил широкое распространение благодаря своей выразительности и мощным абстракциям. Одной из ключевых особенностей Haskell. . .
Как в цикле обойти все поля объекта в JavaScript
bytestream 28.01.2025
Объекты в JavaScript представляют собой фундаментальные структуры данных, которые позволяют хранить и организовывать связанную информацию в виде пар ключ-значение. Каждый объект можно представить как. . .
Как выбрать строки в DataFrame по значению столбца в Pandas
bytestream 28.01.2025
В области анализа данных библиотека Pandas стала незаменимым инструментом для работы с табличными данными в Python. Эта мощная библиотека предоставляет множество функций для эффективной обработки и. . .
Как сделать перенос строки в Bash
bytestream 28.01.2025
При работе с командной оболочкой Bash разработчики часто сталкиваются с необходимостью форматирования текстового вывода, где ключевую роль играет правильное управление переносами строк. Умение. . .
Поиск подстроки в строке с помощью Bash
bytestream 28.01.2025
Поиск подстроки в строке является одной из важных задач в программировании и обработке текстов. Применение такого поиска можно найти в самых разных областях, от анализа данных до разработки. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru