javascript - 在javascript中增加/减少超过步进器的功能

Question

你好，我正在尝试重写一个函数，该函数将在 javascript 中递增/递减超过 1 个步进器。这是我到目前为止尝试过的方法

这是代码笔链接 http://codepen.io/Ongomobile/pen/XdyBgv/

这是 1 个步进器

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

Answer 1

几个问题:

• 这行 parseInt(qty,10) + val; 的目的是什么？ parseInt 旨在将字符串转换为其等效数字。在 base10 数字上调用它没有多大意义。
• 不确定 stepperVal 的名称参数的意义所在。 value 参数是否已经暗示了要踩踏的数量？
• 您可以通过将 this 传递给在 onclick 中声明的函数来传递对触发 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`
}