我有一个显示产品项目的php程序。用户应增加/减少订购金额。我尝试输入type =＆＃39; number＆＃39;。这可以在桌面上使用鼠标。但是，在移动设备上，加号和减号的箭头不显示（鼠标悬停），单击将打开键盘，覆盖大部分屏幕。
我现在正在寻找一种以这种方式显示的方式：
数量：[+] 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 =＆＃34; hidden＆＃34;并显示变量。也没用。
我该如何解决？
答案 0 :(得分：1)
要停止按钮提交表单，请从侦听器功能返回false（或在事件上调用.preventDefault()）。
一般来说，生产代码中的内联JavaScript（JavaScript的html属性）应该像可维护性原因（以及其他原因）一样避免瘟疫。
您将希望避免将事件侦听器附加到每个按钮，因此，由于事件冒泡，我们将在公共父级上侦听单击事件。为此，我们需要将按钮和输入包装在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并将计数器及其相应的文本输入作为参数传递;听取父母的点击事件;缓存单击元素的类;根据类增加或减少文本输入的值;返回false;
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>