Javascript.为什么第一次点击不起作用，而第二次点击正常

Question

这是一个添加到购物车的函数。所以基本上，当我按下添加购物车按钮时，它会在那里的购物车图标上显示数字。但第一次点击时根本不起作用，但第二次点击时效果良好。

//cart function
function cartAdd() {
let cart = document.querySelector('.cart');
let add = document.querySelectorAll('.add');
for (let but of add) {
cart.setAttribute('data-count', 0);
but.onclick = () => {
let item = Number(cart.getAttribute('data-count') || 0);
cart.setAttribute('data-count', item + 1);
cart.classList.add('on');
}
}
}

.cart i {
position: relative;
font-size: 30px;
cursor: pointer;
margin: 0px 10px;
top: 18PX;
}
.cart::after {
position: absolute;
content: attr(data-count);
width: 15px;
height: 15px;
font-size: 12px;
border-radius: 15px;
text-align: center;
background-color: red;
color: white;
cursor: pointer;
z-index: 1;
opacity: 0;
}
.cart.on::after {
opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>

我在but.onclick中使用了console.log("hi"(，但第一次点击时也不会显示"hi"。

Answer 1

但它也不会在第一次点击时显示"hi">

但第二次点击时确实会显示，对吗？那么第三次点击会发生什么？第四个呢？每次点击都会显示该消息多少次？

这是因为代码在每次单击时所做的。具体来说，cartAdd函数的作用是什么？

它为按钮添加了一个点击事件处理程序。

它不执行那个处理程序，只是添加它。所以现在按钮有两个点击事件处理程序。cartAdd函数，以及刚刚添加的处理程序函数。因此，您再次单击它，这两个函数都将执行。其中一个添加了另一个点击事件处理程序。

等等，等等。

不要将事件处理程序作为事件的一部分添加。只需添加它们。完全去掉onclick="cartAdd()"，只在页面加载时(或元素存在时(添加处理程序：

let cart = document.querySelector('.cart');
let add = document.querySelectorAll('.add');
for (let but of add) {
cart.setAttribute('data-count', 0);
but.onclick = () => {
let item = Number(cart.getAttribute('data-count') || 0);
cart.setAttribute('data-count', item + 1);
cart.classList.add('on');
}
}

.cart i {
position: relative;
font-size: 30px;
cursor: pointer;
margin: 0px 10px;
top: 18PX;
}
.cart::after {
position: absolute;
content: attr(data-count);
width: 15px;
height: 15px;
font-size: 12px;
border-radius: 15px;
text-align: center;
background-color: red;
color: white;
cursor: pointer;
z-index: 1;
opacity: 0;
}
.cart.on::after {
opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add">Add-cart</button>

Answer 2

因为您已经有了一个事件侦听器onclick="cartAdd()"，所以在js中不需要它。删除它，添加查询/循环，并设置为0，它应该按预期工作

//cart function
function cartAdd() {
let cart = document.querySelector('.cart');
let item = Number(cart.getAttribute('data-count') || 0);
cart.setAttribute('data-count', item + 1);
cart.classList.add('on');
}

.cart i {
position: relative;
font-size: 30px;
cursor: pointer;
margin: 0px 10px;
top: 18PX;
}
.cart::after {
position: absolute;
content: attr(data-count);
width: 15px;
height: 15px;
font-size: 12px;
border-radius: 15px;
text-align: center;
background-color: red;
color: white;
cursor: pointer;
z-index: 1;
opacity: 0;
}
.cart.on::after {
opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>

Answer 3

//cart function
function cartAdd() {
let cart = document.querySelector('.cart');
let add = document.querySelectorAll('.add');
for (let but of add) {
cart.setAttribute('data-count', 0);
but.onclick = () => {
let item = Number(cart.getAttribute('data-count') || 0);
cart.setAttribute('data-count', item + 1);
cart.classList.add('on');
}
but.click('trigger');
}
}

.cart i {
position: relative;
font-size: 30px;
cursor: pointer;
margin: 0px 10px;
top: 18PX;
}
.cart::after {
position: absolute;
content: attr(data-count);
width: 15px;
height: 15px;
font-size: 12px;
border-radius: 15px;
text-align: center;
background-color: red;
color: white;
cursor: pointer;
z-index: 1;
opacity: 0;
}
.cart.on::after {
opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="cart"> <i class="fa fa-shopping-cart"></i></li>
<button class="add" onclick="cartAdd()">Add-cart</button>

这里不需要更改您的代码，我只添加了第一次点击事件的触发器，您的代码运行良好，您也可以参考jsfiddle 中的代码