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

您的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)
    }
}

Answer 2

您要使用点击目标。这就是事件处理程序的第一个参数的.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 3

您正在定义一个变量，该变量在for循环期间将被写入n次，并且将显示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'));
    }
}

getElementsByClassName onclick并返回数据

3 个答案: