getElementsByClassName onclick и вернуть данные

Question

У меня много таких ссылок в моем шаблоне

<a href="javascript:void(0);" class="add_to_cart" data-slug="{{ product.slug }}">Add</a>

И нужно перейти по ссылке и получить определенную data-slug. Я пытаюсь использовать JS и получить все ссылки так.

var add_to_cart = document.getElementsByClassName('add_to_cart');

После того, как я попробую for

for(var i = 0; i < add_to_cart.length; i++) {
    product_slug = add_to_cart[i].getAttribute('data-slug')

    add_to_cart[i].onclick = function() {
        console.log(product_slug)
    }
}

И после нажатия всегда console.log имеет последнюю data-slug последнюю ссылку в моем шаблоне. Как это исправить и получить data-slug предмета, на который я нажал. Помогите мне, пожалуйста.

Answer 1

Вы хотите использовать цель клика.Это атрибут .target первого аргумента обработчика событий.

Например, следующий код назначает обработчик событий всем элементам add_to_cart на странице и регистрирует слаг в консоли, когда онищелкнул:

let add_to_cart_buttons = document.querySelectorAll('.add_to_cart');

add_to_cart_buttons.forEach(function(node) {
  node.addEventListener('click', (e) => console.log(e.target.dataset.slug));
});

РЕДАКТИРОВАТЬ: Извинения, я неправильно прочитал ваш второй блок кода, когда я впервые написал это.Вы правильно используете document.getElementsByClassName.

Answer 2

Вы определяете переменную, которая записывается n раз в течение цикла for, и n событий, которые будут отображать значение.Вот почему вы каждый раз получаете один и тот же вывод.

Что вы можете сделать, это получить текущую цель вашего события onclick, а затем отобразить его атрибут data-slug

, который ваш цикл for будетвыглядеть так:

var add_to_cart = document.getElementsByClassName('add_to_cart');
for(var i = 0; i < add_to_cart.length; i++) {

    add_to_cart[i].onclick = function(evt) {
        console.log(evt.target.getAttribute('data-slug'));
    }
}

Answer 3

Ваш цикл for не работает, потому что значение product_slug устанавливается при запуске цикла. Поскольку product_slug является var, вы перезаписываете его при каждом запуске цикла. И когда прослушиватель щелчка называется product_slug, он будет иметь то же значение, что и при последнем запуске цикла.

var создает переменную с областью действия функции, она определяется в области действия функции.

let или const создает переменную с областью видимости блока, она определяется в области видимости блока (внутри фигурных скобок { }).

Подробнее о scope .

Итак, вы хотите использовать let.

for(var i = 0; i < add_to_cart.length; i++) {
    let product_slug = add_to_cart[i].getAttribute('data-slug')
    add_to_cart[i].onclick = function() {
        console.log(product_slug)
    }
}