函数在javascript中递增/递减超过步进器

时间:2016-05-05 10:30:38

标签: 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;
}

2 个答案:

答案 0 :(得分:1)

使用以下必须有效:

var re = /#((?:(?!<(?:div|br|p)>)[^#\s])*)/g; 
var str = `#a<div>
#b<br>
#c<p>
#d<hi>`;
var res = [];
 
while ((m = re.exec(str)) !== null) {
    res.push(m[1]);
}
document.body.innerHTML = "<pre>" + JSON.stringify(res.map(x => x.replace(/</g,"&lt;").replace(/</g,"&gt;")), 0, 4) + "</pre>";

答案 1 :(得分:1)

一些问题:

  • 这一行parseInt(qty,10) + val;的目的是什么? parseInt旨在将字符串转换为其等效数字。在base10号码上调用它没什么意义。
  • 不确定stepperVal的名称参数是什么意思。不是value参数已隐含的步数吗?
  • 您可以通过将onclick传递给this内声明的函数来传递对触发onclick事件的对象的引用。
  • new_qty始终评估为val
  • stepperVal(arg,-1)实际上与stepperVal(arg,0)相同。为什么不这样称呼呢?

更新了代码

替换&#34;一个&#34;使用this

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