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>
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Добавить комментарий