<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.

Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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