Question

在我提出问题之前，我只是简单介绍一下设置：

我目前有一个库存订购系统，其中有一个产品列表，每个产品旁边有3个div，需要订购多个，以及一个+ Box和一个 - 框，当点击时增加或减少数量。

目前，我的Javascript很糟糕（Eye Bleedingly so！）我为每个人设置了Javascript代码+＆amp; - 从长远来看，每个产品的手动按钮都是不可行的。

单个产品的我的代码如下

var largebeefburger = 0;
document.getElementById("largebeefburger").value = largebeefburger;
function largebeefburgerup(){
largebeefburger++
document.getElementById("largebeefburger").value = largebeefburger;
}
function largebeefburgerdown(){
 if (largebeefburger <= 0){document.getElementById("largebeefburger").value = largebeefburger;}
else {
largebeefburger--
document.getElementById("largebeefburger").value = largebeefburger;
  }}

正如您所看到的，这完全是笨拙的，并且是升级的噩梦。

我的问题是：

有没有办法将每个产品简化为两个功能？例如

productup productdown

改变前端根本不是问题，所以如果我需要移动Divs，那么这个数字就成了按钮的父级，这绝对没问题。

非常感谢任何帮助和建议

谢谢。

编辑（我的Html）

<div class="productbox">Large Beef Burgers (Case)</div><div     onClick="largebeefburgerdown()" class="minus">-</div>
<div class="numberbox"><input name="largebeefburger" type="text" readonly   id="largebeefburger" value=""></div>
<div onClick="largebeefburgerup()" class="plus">+</div>

Answer 1

有很多方法可以做到这一点：

根据您操作
基于元素的data-*属性
可能还有其他几个

最好的方法取决于您的HTML / DOM结构。

这是一个通过在周围元素中工作的示例，使用围绕所有这些元素的容器上的委托点击处理程序：

＆＃13;

(function() {
  document.getElementById("container").addEventListener("click", function(e) {
    var target, field, incr;
    
    target = e.target;
    if (target.className == "up") {           // See note below
      incr = 1;
    } else if (target.className == "down") {  // See note below
      incr = -1;
    }
    if (incr) {
      field = target.parentNode.querySelector("input[type=text]");
      field.value = +field.value + incr;
    }
  }, false);
})();

＆＃13;

<div id="container">
  <div>
    <input type="text" value="0">
    <input type="button" value="+" class="up">
    <input type="button" value="-" class="down">
  </div>
  <div>
    <input type="text" value="0">
    <input type="button" value="+" class="up">
    <input type="button" value="-" class="down">
  </div>
  <div>
    <input type="text" value="0">
    <input type="button" value="+" class="up">
    <input type="button" value="-" class="down">
  </div>
</div>

＆＃13;

这是一个更脆弱的结构，因为它会依赖于您在更改内容时更新按钮上的data-*属性：

＆＃13;

(function() {
  document.getElementById("container").addEventListener("click", function(e) {
    var target, fieldId, field, incr;
    
    target = e.target;
    fieldId = target.getAttribute("data-field");
    if (fieldId) {
      if (target.className == "up") {            // See note below
        incr = 1;
      } else if (target.className == "down") {   // See note below
        incr = -1;
      }
      if (incr) {
        field = document.getElementById(fieldId);
        if (field) {
          field.value = +field.value + incr;
        }
      }
    }
  }, false);
})();

＆＃13;

<div id="container">
  <input id="first" type="text" value="0">
  <input data-field="first" type="button" value="+" class="up">
  <input data-field="first" type="button" value="-" class="down">
  <br>
  <input id="second" type="text" value="0">
  <input data-field="second" type="button" value="+" class="up">
  <input data-field="second" type="button" value="-" class="down">
  <br>
  <input id="third" type="text" value="0">
  <input data-field="third" type="button" value="+" class="up">
  <input data-field="third" type="button" value="-" class="down">
</div>

＆＃13;

（显然，使用className == "xxx"只是为了演示的目的，一旦你为这些元素添加了第二个类就会中断，但是你可以处理那里的细节我确定...... ）

Answer 2

您应该创建一个更通用的函数来增加指定的目标。

function incrementValue(targetID, increment){
  var target = document.getElementById(targetID);
  target.value += increment;
  if (target.value <= 0) {
    target.value = 0;
  }
}

然后，您可以通过传递目标ID和值增量（1或-1）来调用此函数。

<div onClick="largebeefburgerup("largebeefburger", -1)" class="minus">-</div>
<div onClick="largebeefburgerup("largebeefburger", 1)" class="plus">+</div>

简化Javascript声明

2 个答案: