Data атрибуты на jQuery (часть 2)
В первой части, мы учились получать и изменять значение атрибута на jQuery. Во второй части, напишем программу на jQuery - при клике по цветной кнопке, будет меняться изображение.
Чтобы каждый раз не заставлять программу искать в коде указанные элементы, поместим их в переменную. Откуда взялся такой селектор, можно узнать из прошлого урока.
let $shirtImage = $('.imagePlace img');
Далее нам необходимо прописать действия, чтобы при клике на каждый цвет переключалась картинка с футболкой. При клике по кнопке с классом .black, значение атрибута src меняется на изображение с черной футболкой. А при клике по голубой кнопке - соответственно на голубую. Данный кусок кода нужно будет прописать 4 раза, только меняя класс и название файла.
$('.black').on('click', function(){
$('.imagePlace img').attr('src', 'jquery_data_black.jpg');
});
Надо сказать, что это совсем не то, к чему мы стремимся в программировании. Если видите тупое дублирование кода, то оптимизируйте его - ищите более лаконичное решение. В нашем случае, оптимальным решением будет - использование this и data атрибута.
Мы не просто так в HTML-разметке каждому переключателю цвета, прикрепляли соответствующий data атрибут (data-image-path="jquery_data_gray.jpg"). Значения у data атрибутов - это пути к картинкам, на которые будет меняться текущая картинка из HTML-разметки.
Выбираем кнопку по селектору класса и по событию клика, у нас будет запускаться callback функция. Внутри функции создадим локальную переменную imagePath и присвоим ей значение: этой (this) кнопки, по которой кликнули со значением в data атрибуте (путь до картинки). Мы не можем жестко задать конкретный селектор, поскольку не знаем, по какому цвету кликнет пользователь. Ключевое слово this примет в себя только тот элемент, по которому кликнули. Мы берем у него data атрибут, и нужная картинка попадает в переменную.
$('.color').on('click', function(){
let imagePath = $(this).attr('data-image-path');
console.log(imagePath);
$shirtImage.attr('src', imagePath);
});
Проверим, правильно ли мы все сделали - будем выводить в консоль содержимое переменной, каждый раз кликая по квадратикам.
Как видите, все работает - в переменную попадает правильное изображение. Давайте улучшим наш скрипт и сделаем переключение более плавным. К счастью у jQuery уже заготовлены простенькие анимации. Осталось только применить их на нужном элементе. Перед тем, как поменять src, будем скрывать картинку (fadeOut), а после замены - показывать (fadeIn).
$shirtImage.fadeOut(200, function(){
$shirtImage.attr('src', imagePath).fadeIn(200);
});
Весь код целиком.
$(document).ready(function(){
let $shirtImage = $('.imagePlace img');
$shirtImage.on('click', function(){
$('this').attr('src', 'jquery_data_white.jpg');
});
$('.color').on('click', function(){
let imagePath = $(this).attr('data-image-path');
$shirtImage.attr('src', imagePath);
$shirtImage.fadeOut(200, function(){
$shirtImage.attr('src', imagePath).fadeIn(200);
});
});
});
-
Создано 25.12.2019 11:23:35
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.