javascript - 在JavaScript中增加/减少步长的功能

您好，我正在尝试重写一个函数，该函数将在javascript中增加/减少1个步进。这是我到目前为止尝试过的

这是一个Codepen链接http://codepen.io/Ongomobile/pen/XdyBgv/

这是其中之一

<div class="qtyDiv">
        <label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
        <input class="qtyInput" id="qty1" value="0" name"one" />
        <!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
        <button class=" tallyBtn" id="down" onclick="stepperVal("one",-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="stepperVal("one",1)">+1</button>
</div>

// This is current one
function modify_qty(val) {
  var qty = document.querySelector("#qty1").value;

  var new_qty = parseInt(qty,10) + val;

  if (new_qty < 0) {
    new_qty = 0;
  }

  document.querySelector("#qty1").value = new_qty;

  return new_qty;
}

这就是我尝试过的

function stepperVal(name,val){
  var qty = 0;
  var new_qty = parseInt(qty,10) + val;

  if (new_qty < 0) {
    new_qty = 0;
  }
  [name].value = new_qty;
  return new_qty;
}

最佳答案

一些问题：


此行parseInt(qty,10) + val;的目的是什么？ parseInt用于将字符串转换为其等效数字。以base10号码调用它没有多大意义。
不确定stepperVal的name参数的含义是什么。 value参数是否已隐含要逐步增加的金额？
通过将onclick传递给在this中声明的函数，可以传递对触发onclick事件的对象的引用。
new_qty始终计算为val
stepperVal(arg,-1)实际上与stepperVal(arg,0)相同。为什么不这样称呼它呢？


更新的代码

用this替换“ one”：

<div class="qtyDiv">
        <label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
        <input class="qtyInput" id="qty1" value="0" name"one" />
        <!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
        <button class=" tallyBtn" id="down" onclick="stepperVal(this,-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="stepperVal(this,1)">+1</button>
</div>

简化的JS：

function stepperVal(event, val){
  clicked_link = event.target
  return clicked_link.value = Math.max(0, val);  # Return the greater of 0 and `val`
}