首页猿问独立工作的...

独立工作的 HTML、Javascript 多个按钮

JavaScript

呼唤远方 2021-12-02 16:07:42

我正在尝试创建一个具有多个控制数量（加号和减号）按钮的 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>

查看完整描述

3 回答

九州编程

TA贡献1785条经验获得超4个赞

您快到了，但是您为每个输入指定了相同的 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 名称作为参数传递给函数：

将其他输入字段 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>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

反对回复 2021-12-02

牧羊人nacy

TA贡献1862条经验获得超7个赞

获取当前点击的加号/减号按钮的相对输入，然后进行操作，添加片段：

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>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

反对回复 2021-12-02

慕哥9229398

TA贡献1877条经验获得超6个赞

我的解决方案版本。输入元素应该有类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>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

反对回复 2021-12-02

3 回答
0 关注
219 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

独立工作的 HTML、Javascript 多个按钮

独立工作的 HTML、Javascript 多个按钮

3 回答

添加回答