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>
Добавить комментарий