独立工作的 HTML、Javascript 多个按钮
我正在尝试创建一个具有多个控制数量（加号和减号）按钮的 Web 服务器。如果我有 3 组加号按钮、减号按钮和文本，当我按下某一组时，它应该不会相互干扰。我如何实现这一目标？
我写的代码是：
var count=0;
var quantity = document.getElementById("quantity");
function plus(){
count++;
quantity.value = count;
}
function minus(){
if (count > 0) {
count--;
quantity.value = count;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
max-width: 200px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row {margin: 0 -5px;}
.column {
float: left;
width: 15%;
padding: 0 10px;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
<!DOCTYPE html>
<html >
<head>
<title>My Page</title>
<meta charset="utf-8">
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<p><b>Item 1</b></p>
<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
<input type='text' id='quantity' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
</div>
</div>
<div class="column">
<div class="card">
<p><b>Item 2</b></p>
<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
<input type='text' id='quantity' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
</div>
</div>
<div class="column">
<div class="card">
<p><b>Item 3</b></p>
<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
<input type='text' id='quantity' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
</div>
</div>
</div>
</body>
</html>
呼唤远方浏览 220回答 3
3回答
-
九州编程
您快到了，但是您为每个输入指定了相同的 ID（ID 应该是唯一的）。因此，对于每个输入，将 id 更改为唯一的。然后，您可以更改JavaScript功能，包括“的getElementById”里面的功能，把它作为一个变量，你也需要改变计数VAR是输入字段的值，如下所示：function plus(idname){ var quantity = document.getElementById(idname); let val = quantity.value; val++; quantity.value = val;}function minus(idname){ var quantity = document.getElementById(idname); let val = quantity.value; if (val > 0) { val--; quantity.value = val; }}输入具有唯一 id 的示例并将 id 名称作为参数传递给函数：<input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/><input type='text' id='quantityA' value='0' style="width: 40px;" /><input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/>将其他输入字段 id 命名为“quantityB”等......然后，这将仅将 +/- 应用于您使用 id 作为参数传递给 js 函数的输入字段。我已经测试过这个并且它有效。您可以进一步压缩此代码，但这为您提供了一个可以继续进行的工作示例。function plus(idname){ var quantity = document.getElementById(idname); let val = quantity.value; val++; quantity.value = val;}function minus(idname){ var quantity = document.getElementById(idname); let val = quantity.value; if (val > 0) { val--; quantity.value = val; }}<!DOCTYPE html> <html > <head> <title>My Page</title> <meta charset="utf-8"> </head> <body> <div class="row"> <div class="column"> <div class="card"> <p><b>Item 1</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/> <input type='text' id='quantityA' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 2</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityB')"/> <input type='text' id='quantityB' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus('quantityB')"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 3</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityC')"/> <input type='text' id='quantityC' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus('quantityC')"/></p> </div> </div> </div> </body> </html> -
牧羊人nacy
获取当前点击的加号/减号按钮的相对输入，然后进行操作，添加片段：function plus(e){ var quantity = e.parentElement.querySelector("#quantity"); var count = parseInt(quantity.value || 0) count++; quantity.value = count;}function minus(e){ var quantity = e.parentElement.querySelector("#quantity"); var count = parseInt(quantity.value || 0) if (count > 0) { count--; quantity.value = count; }}.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1; max-width: 200px; } .row:after { content: ""; display: table; clear: both; } .row {margin: 0 -5px;} .column { float: left; width: 15%; padding: 0 10px; } @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } }<!DOCTYPE html> <html > <head> <title>My Page</title> <meta charset="utf-8"> </head> <body> <div class="row"> <div class="column"> <div class="card"> <p><b>Item 1</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/> <input type='text' id='quantity' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 2</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/> <input type='text' id='quantity' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 3</b></p> <p><input type='button' value='-' id="qtyminus" onclick="minus()"/> <input type='text' id='quantity' value='0' style="width: 40px;" /> <input type='button' value='+' id="qtyplus" onclick="plus()"/></p> </div> </div> </div> </body> </html> -
慕哥9229398
我的解决方案版本。输入元素应该有类quantity，加按钮qtyplus类，减按钮qtyminus类，你不必生成唯一的id...function plus(qty){ qty.value++;}function minus(qty){ if (qty.value > 0) { qty.value--; }}function quantity() { var qtyInstances = document.getElementsByClassName("quantity"); Array.prototype.forEach.call(qtyInstances, function(el) { const wrap = el.parentElement; const plusBtn = wrap.querySelector('.qtyplus'); const minusBtn = wrap.querySelector('.qtyminus'); plusBtn.addEventListener('click', plus.bind(null, el)); minusBtn.addEventListener('click', minus.bind(null, el)); });}quantity();.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1; max-width: 200px; } .row:after { content: ""; display: table; clear: both; } .row {margin: 0 -5px;} .column { float: left; width: 15%; padding: 0 10px; } @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } }<!DOCTYPE html> <html > <head> <title>My Page</title> <meta charset="utf-8"> </head> <body> <div class="row"> <div class="column"> <div class="card"> <p><b>Item 1</b></p> <p><input type='button' value='-' class="qtyminus"/> <input class='quantity' type='text' id='quantity1' value='0' style="width: 40px;" /> <input type='button' value='+' class="qtyplus"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 2</b></p> <p><input type='button' value='-' class="qtyminus"/> <input class='quantity' type='text' id='quantity2' value='0' style="width: 40px;" /> <input type='button' value='+' class="qtyplus"/></p> </div> </div> <div class="column"> <div class="card"> <p><b>Item 3</b></p> <p><input type='button' value='-' class="qtyminus"/> <input class='quantity' type='text' id='quantity3' value='0' style="width: 40px;" /> <input type='button' value='+' class="qtyplus"/></p> </div> </div> </div> </body> </html>
随时随地看视频慕课网APP
相关分类
JavaScript