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

@Kurio · Регистрация: 09.02.2022

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

Приветствую.

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

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

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

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

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

Javascript

// 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) {
                
            }
        }
    }
}

@klyapa · 13.02.2022, 21:57

А что это за переменная?

Javascript

1	let checkerValue = document.querySelector('.char___img').src;

Вы просто хотите менять адрес статической картинке, нажимая на кнопки право/лево, и в зависимости от кнопки, передвигаться по индексам массива с адресами charConfig вперёд/назад. Я правильно понимаю?

@Kurio · 13.02.2022, 22:21 **[ТС]**

Да, правильно понимаете.

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

Просто я записал её наименование не особо логично, думаю, можно поменять.

@klyapa · 13.02.2022, 23:37

Javascript

// 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];
}

@Kurio · 13.02.2022, 23:49 **[ТС]**

Очень интересное решение)
Спасибо)

@klyapa · 13.02.2022, 23:52

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

Очень интересное решение)

Работает хоть? )

@Kurio · 13.02.2022, 23:56 **[ТС]**

Да, всё работает.

@klyapa · 14.02.2022, 00:04

Кстати, пока не забыл, доставать значение src вот таким образом - плохая затея...

Javascript

1	let checkerValue = document.querySelector('.char___img').src;

Вы получите полный путь к картинке с протоколом и всеми patch-ами. Если имеете дело с относительными адресами изображений, то лучше использовать метод...

Javascript

1	img.getAttribute('src')

@Kurio · 14.02.2022, 00:22 **[ТС]**

Да, из-за этого у меня и не получалось нормально получить ссылку, чтобы ею манипулировать в будущем. Поэтому и появились проблемы)
Благодарю.

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 22:21 [ТС]	3
	Да, правильно понимаете. Эта переменная - сама картинка в DOM-структуре. (тоесть её нужно менять из конфига на право-лево) Просто я записал её наименование не особо логично, думаю, можно поменять. 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 23:49 [ТС]	5
	Очень интересное решение) Спасибо) 0

@klyapa 3502 / 1266 / 429 Регистрация: 24.07.2016 Сообщений: 1,889
	13.02.2022, 23:52	6
	Сообщение от Kurio Очень интересное решение) Работает хоть? ) 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	13.02.2022, 23:56 [ТС]	7
	Да, всё работает. 0

@Kurio 1 / 1 / 0 Регистрация: 09.02.2022 Сообщений: 22
	14.02.2022, 00:22 [ТС]	9
	Да, из-за этого у меня и не получалось нормально получить ссылку, чтобы ею манипулировать в будущем. Поэтому и появились проблемы) Благодарю. 0

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

Решение