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

24 сентября 2019 JavaScript jQuery

data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки «Купить», скрипту передавалось бы название и цена выбранного товара.

        Системный блок
        24 000 руб.
        Купить



        Монитор
        9 000 руб.
        Купить

В примере 2 товара с названием и ценой. У каждого товара есть свой ID, который дублируется в data-* атрибуте data-prodid.

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

$(document).ready(function(){
    $('.buy').click(function(){
        var id = $(this).data('prodid'); // получаем id товара в атрибуте
        console.log($('#'+id).find('.name').text()); // выводим название товара
        console.log($('#'+id).find('.price').text()); // выводим стоимость товара
        });
});