Михаил Вишневецкий Ответов: 2

Как получить значение data-id


У меня есть несколько элементов на странице
<div class="product" data-id="1">
<div class="product_pic" style="background: url('static/img/product-2.jpg') no-repeat; background-size: auto 100%; background-position: center"></div>
&ЛТ;промежуток класс="имя_продукта"&ГТ;шары Воздушные&ЛТ;/службы&ГТ;
&ЛТ;промежуток класс="product_price"&ГТ;100 руб.&ЛТ;/службы&ГТ;
&л;класс button="js_buy">купить&ЛТ; кнопка/&ГТ;
</div>
как нажать на button.js_buy я могу получить значение из div.data-id и отправить его в форму заказа, открытого для нажатия на это?

Что я уже пробовал:

пусть btnGoods = документ.querySelectorAll('.js_buy');
для (var i = 0; i < btnGoods.длина; i++) {
btnGoods[i].addEventListener('click', () => {
консоли.журнал(это.parentNode.данные-идентификатор функции getattribute (''));
});
}
Я получаю неопределенное значение в консоли...

2 Ответов

Рейтинг:
11

Vincent Maverick Durano

Вы можете попробовать получить к нему доступ Вот так:

function myFunction() {
  var div = document.getElementsByTagName("div")[0].getAttribute("product"); 
  var id = div.getAttribute('data-id'); 
}


При использовании описанного выше подхода вам необходимо знать значение индекса div иерархия на странице, иначе вы получите неожиданное поведение. Так что лично я вам этого не рекомендую.


Если вы хотите использовать JavaScript, то вам может потребоваться установить атрибут id/name для вашего сайта. div элементы, чтобы вы могли легко ссылаться на них.

<div id="divProduct" class="product" data-id="1"> </div>


Затем вы можете получить значение data-id атрибут вроде этого:

<script>
function myFunction() {
  //reference the div
  var plant = document.getElementById('divProduct');
  //get the value of data-id attribute
  var id = plant.getAttribute('data-id'); //return 1
  
}
</script>


Затем вы можете позвонить в myFunction() метод крепления onclick событие для вашей кнопки:

<button class="js_buy" onclick="myFunction();">Buy</button>



Если вы можете использовать jQuery, то вы можете просто получить доступ к элементам DOM с помощью селекторов без необходимости указывать атрибут id или name или изменять свой HTML. Например:

<script>
$(".js_buy" ).click(function() {
  var id = $(".product").attr("data-id"); // will return the value 1
});
</script>


Richard Deeming

Все эти решения предполагают наличие только одного продукта <div> на странице. :)

Рейтинг:
1

Richard Deeming

Цитата:
let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', () => {
        console.log(this.parentNode.getAttribute('data-id'));
    });
}
Я получаю неопределенное значение в консоли.

Проблема в том, что вы используете функция стрелки[^] для прослушивателя событий. Функции стрелок не получают своих собственных this ссылка; они наследуют ее из внешней области.

Если вы измените свой код прослушивателя на console.log(this);- вот увидишь this глобальный объект window.

Вы можете либо изменить свой прослушиватель событий на обычную функцию:
let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', function() {
        console.log(this.parentNode.getAttribute('data-id'));
    });
}
Или используйте объект события для поиска цели:
let btnGoods = document.querySelectorAll('.js_buy');
for (var i = 0; i < btnGoods.length; i++) {
    btnGoods[i].addEventListener('click', e => {
        var clickedButton = e.target || e.srcElement;
        console.log(clickedButton.parentNode.getAttribute('data-id'));
    });
}
Event.target - веб-API | MDN[^]