javascript - 需要替换输入数字

Question

我有一个显示产品项目的 php 程序。用户应增加/减少订购数量。我尝试输入类型='数字'。在桌面上用鼠标就可以了。但是，在移动设备上，加号和减号的箭头不会显示(鼠标悬停)，单击将打开覆盖大部分屏幕的键盘。

我现在正在寻找一种显示方式:

数量:[+] 2 [-]

我尝试了js代码:

<script>
var i = 0;
function buttonClickAdd() {
    i++;
    document.getElementById('inc').value = i;
}
function buttonClickSub() {
    i--;
    document.getElementById('inc').value = i;
}

和 php 部分(在 foreach 循环内):

<button onclick="buttonClickAdd();">[plus]</button>
<input type="text" id="inc" value="0"></input>
<script>i</script>
<button onclick="buttonClickSub();">[minus]</button>

此代码将触发提交到 order.php 页面，但我想在进入该页面之前增加所有值。我尝试使用 type="hidden"和 with 显示变量。也没用。

如何解决？

Answer 1

要阻止按钮单击提交表单，请从监听器函数返回 false(或对事件调用 .preventDefault())。

一般来说，出于可维护性的原因(以及其他原因)，应该避免生产代码中的内联 JavaScript(JavaScript 的 html 属性)。

您将希望避免将事件监听器附加到每个按钮，因此，由于事件冒泡，我们将监听公共(public)父级上的单击事件。为此，我们需要将按钮和输入包装在 span 标记内。

<form>
  <span class="counter">
    <button class="counter-up">+</button>
    <input type="text" class="counter-num" value="0" readonly>
    <button class="counter-dn">-</button>
  </span>
</form>

在上面你可以看到我添加了一堆类。父级需要一个类，以便我们可以轻松选择它们来监听事件；每个按钮都需要一个类，以便我们知道要执行什么操作；输入需要一个类，以便我们可以选择它并在其值中执行操作。

选择所有计数器父项；循环遍历计数器，创建 IIFE 并将计数器及其相应的文本输入作为参数传递；监听父级上的点击事件；缓存被点击元素的类；根据类别增加或减少文本输入的值；返回错误；

var counters = document.querySelectorAll('.counter');
//                                   vv IIFE
for(var i in Object.keys(counters)) (function(counter, num){
  counter.onclick = function(e) {
    var cn = e.target.className;
    if(/counter-up/.test(cn)) return ++num.value, false;
    if(/counter-dn/.test(cn)) return --num.value, false;
    //                                          ^ comma operator
  }; 
})(counters[i], counters[i].querySelector('.counter-num'));

逗号运算符在这里很有用，可以节省空间。逗号运算符将计算每个表达式，然后返回最后一个。在上面的代码中，它表示增加或减少输入的值然后返回 false。请参阅下面的演示，了解所有这些操作的实际情况。

var counters = document.querySelectorAll('.counter');
for(var i in Object.keys(counters)) (function(counter, num){
  counter.onclick = function(e) {
    var cn = e.target.className;
    if(/counter-up/.test(cn)) return ++num.value, false;
    if(/counter-dn/.test(cn)) return --num.value, false;
  };   
})(counters[i], counters[i].querySelector('.counter-num'));

.counter { display: block; } .counter * { border: 1px solid #bbb; border-radius: 2px; margin: 1px}

<form>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
</form>

进一步阅读

• Immediately-invoked function expression (IIFE) (Wikipedia)
• Comma Operator (MDN)
• Document.querySelectorAll() (MDN)
• Element.querySelector() (MDN)
• RegExp.test() (MDN)
• NodeList (MDN)