Skip to main content

jQuery data-* атрибуты

jQuery data-* атрибуты

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>
Похожие записи
Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например... Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем... Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с... Читать далее

Всплывающее окно при закрытии страницы

Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя... Читать далее

Добавить комментарий

*

code