<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Получить и изменить значение атрибута на jQuery

Получить и изменить значение атрибута на jQuery

На этом уроке мы научимся работать с data атрибутами у изображений (img src), используя библиотеку jQuery. В ходе урока, постараемся не сильно углубляться в теорию, количество которой и так зашкаливает в интернете. А лучше сосредоточимся на практической стороне.

Получить и изменить значение атрибута на jQuery.

Перед нами стоит задача: Написать на jQuery небольшой скрипт выбора товара по цвету. Имеется 5 футболок разного цвета, выбирая квадратик с нужным цветом, на странице будет появляться одна футболка с соответствующим цветом.

HTML разметка

Создадим одну обертку для блока с изображением, а другую для цветных квадратиков. На скриншоте, для наглядности, обе обертки-родителя имеют красную рамку. Элементы с черной рамкой - это дети.

Получить и изменить значение атрибута на jQuery.

По умолчанию установлена белая футболка. В коде сразу задаем классы с осмысленными названиями, следующим шагом пропишем для них CSS стили. Так же сразу добавим data атрибуты - привяжем к определённому цвету, подходящее изображение. К установленным атрибутам, вернемся чуть позже.

<div class="imageWrap">
   <div class="imagePlace">
    <img src="jquery_data_white.jpg" alt="футболка">
  </div>
</div>
<div class="colorWrap">
  <div class="color black" data-image-path="jquery_data_black.jpg"></div>
  <div class="color blue" data-image-path="jquery_data_blue.jpg"></div>
  <div class="color gray" data-image-path="jquery_data_gray.jpg"></div>
  <div class="color pink" data-image-path="jquery_data_pink.jpg"></div>
</div>

CSS код

Используем технологию флексбоксов, исключительно для выравнивания по центру. Для этого, зададим родителям (блоки с красной рамкой) свойства flex.

.imageWrap{
    display: flex;
    justify-content: center;
}

.colorWrap{
    display: flex;
    justify-content: center;
}

Далее работаем с дочерними элементами. В классе .color, прописываем нужные отступы, указываем размеры кнопок и делаем курсор в виде руки (приглашая сделать клик). Данный набор стилей одинаковый для всех кнопок, поэтому добавим этот класс ко всем кнопкам.

.color {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

Создадим классы-модификаторы, отличающиеся от друга цветом фона. Каждый квадратик получит общий класс .color и индивидуальный класс-модификатор (цвета).

.black{
    background: #000;
}
.blue{
    background: #a3bfd5;
}
.gray{
    background: #e9e9e9;
}
.pink{
    background: #f6a4bb;
}

Подключим библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Получить значение атрибута по img src на jQuery

Сначала получим картинку по значению атрибута. Обратимся к тегу img, через его родителя - получим селектор (.imagePlace img). При помощи метода attr, вытащим значение атрибута src, то есть картинку из HTML-разметки (jquery_data_white.jpg).

let srcValue = $('.imagePlace img').attr('src');

Присвоим значение атрибута переменной srcValue и убедимся, что переменная действительно ссылается на картинку. Выведем переменную в консоли или в модальном окне.

console.log(srcValue);

Если в консоли вы увидите название изображения (jquery_data_white.jpg), значит все в порядке и можно двигаться дальше.

Получить и изменить значение атрибута на jQuery.

Это была небольшая разминка. Переменная srcValue создавалась в учебных целях, для демонстрации получения элемента по img src.

Изменить значение атрибута по img src на jQuery

По событию клика по селектору, который выбирает текущую картинку, запустится callback функция. Функция выбирает тот же самый селектор. Метод attr возвращает первым параметром значене атрибута src, а вторым параметром указываем новое значение (другую картинку). Теперь при клике по белой футболке, произойдет замена на черную.

$('.imagePlace img').on('click', function(){
    $('.imagePlace img').attr('src', 'jquery_data_black.jpg');
});

Мы научились получать и изменять значение атрибута на jQuery, чисто для практики. На следующем уроке напишем программу по выбору цвета у товара.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.