时间戳

首页 > 解决方案 > 使用 Javascript 函数跨越单击按钮的特定类中的类

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

问题描述

我有一个基于 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”类中的跨度类？

标签： javascripthtml

解决方案

选择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;
  }
}

推荐阅读