jQuery data-* атрибуты
24 сентября 2019 JavaScript jQuery
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки «Купить», скрипту передавалось бы название и цена выбранного товара.
<div id="157" class="product"> <div class="name">Системный блок</div> <div class="price">24 000 руб.</div> <button class="buy" data-prodid="157">Купить</button> </div> <div id="158" class="product"> <div class="name">Монитор</div> <div class="price">9 000 руб.</div> <button class="buy" data-prodid="158">Купить</button> </div>
В примере 2 товара с названием и ценой. У каждого товара есть свой ID, который дублируется в data-* атрибуте data-prodid. Здесь технический перевод
При нажатии на кнопку купить, получаем ID с помощью селектора data и обращаемся по нему к нужному товару. Получаем название и цену и выводим все в консоль. Не забудьте подключить библиотеку jQuery.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('.buy').click(function(){
var id = $(this).data('prodid'); // получаем id товара в атрибуте
console.log($('#'+id).find('.name').text()); // выводим название товара
console.log($('#'+id).find('.price').text()); // выводим стоимость товара
});
});
</script>
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Добавить комментарий