使用 Javascript 函数跨越单击按钮的特定类中的类答案

【问题标题】：Use Javascript function to span class that is in that particular class the button was clicked使用 Javascript 函数跨越单击按钮的特定类中的类
【发布时间】：2020-05-22 20:22:33
【问题描述】：

我有一个基于 javascript 的购物车。有多个推车，每个推车都有相同的加号和减号按钮。我有这 2 个简单的函数，加 1 或减 1，取决于单击的按钮。

function plus() {
  var spanclass = document.getElementById('hoeveel')
  var count = spanclass.innerHTML;
  count++;
  document.getElementById('hoeveel').innerHTML = count;
}

function minus() {
  var spanclass = document.getElementById('hoeveel')
  var count = spanclass.innerHTML;
  if (count > 1) {
    count--;
    document.getElementById('hoeveel').innerHTML = count;
  }
}

这有效，但当购物车中的商品超过 1 件时无效。当加号按钮被点击购物车中的第二个项目时，第一个项目的数量会发生变化。

我的问题是，是否可以只更改与单击按钮相同的“cartrow”类中的跨度类？

【问题讨论】：

使用通用类而不是 ID，并使用适当的事件处理程序来更改参考点击元素的跨度
使用你点击的元素的上下文，比如传递这个值或者使用事件
你真的应该深入研究'javascript eventListener'，尤其是参数。创建一个通用的“侦听器”并从传递的event 参数中查询event:target。例如。 MDN: Event.target

标签： javascript html

【解决方案1】：

getElementById 的选择在页面上应该是唯一的，因此它只返回第一次出现，即购物车上的第一项。如果您想以不同的方式选择每个项目，您应该为每个项目使用一个公共类 (cart-item) 和不同的标识符（item-001、item-002...）。

var item = document.getElementsByClassName("cart-item").getElementById("item-001");

编辑：要知道点击了哪个按钮，可以使用 onclick 事件：

function plus(event) {
  var count = event.target.innerHTML;
  count++;
  event.target.innerHTML = count;
}

function minus(event) {
  var count = event.target.innerHTML;
  if (count > 1) {
    count--;
    event.target.innerHTML = count;
  }
}

【讨论】：

您好，感谢您的回答。但这并不能解决问题。因为现在我仍然不知道点击了所有“cartrow”类的哪个按钮。
嗨，卢克！要知道单击了哪个按钮，我认为您可以在这两个函数中使用单击事件。我将编辑我的回复，以便您看得更清楚。
您可能希望将 innerHTML 转换为 number()，因为它是一个字符串。但是JS可能是宽容的，我总是忘记。
嗨@mhSangar，我整个下午都在挣扎。 jsduniya 的回答对我帮助很大，并为我解决了问题！我无法让这些事件发挥作用，但这会达成交易。非常感谢你的帮助。我有很多学习要做哈哈

【解决方案2】：

您可以尝试这样的事情.. 我们可以通过多种方式解决这个问题。

function increment(ele,flag){

 var spanElement = flag ? ele.previousSibling : ele.nextSibling;
 var count = parseInt(spanElement.innerHTML);
 if(flag) {
   count = count+1;
 } else {
   count = count-1;
 }
  spanElement.innerHTML = parseInt(count);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  
  <button onclick="increment(this,false)">-</button><span class="count">0</span><button onclick="increment(this,true)">+</button>
  <br>
  <button onclick="increment(this, false)">-</button><span class="count">1</span><button onclick="increment(this, true)">+</button>

</body>
</html>

【讨论】：