猿问

独立工作的 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){&nbsp; &nbsp; var quantity = document.getElementById(idname);&nbsp; &nbsp; let val = quantity.value;&nbsp; &nbsp; val++;&nbsp; &nbsp; quantity.value = val;}function minus(idname){&nbsp; &nbsp; var quantity = document.getElementById(idname);&nbsp; &nbsp; let val = quantity.value;&nbsp; &nbsp; if (val > 0) {&nbsp; &nbsp; &nbsp; &nbsp; val--;&nbsp; &nbsp; &nbsp; &nbsp; quantity.value = val;&nbsp; &nbsp; }}输入具有唯一 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){&nbsp; &nbsp; var quantity = document.getElementById(idname);&nbsp; &nbsp; let val = quantity.value;&nbsp; &nbsp; val++;&nbsp; &nbsp; quantity.value = val;}function minus(idname){&nbsp; &nbsp; var quantity = document.getElementById(idname);&nbsp; &nbsp; let val = quantity.value;&nbsp; &nbsp; if (val > 0) {&nbsp; &nbsp; &nbsp; val--;&nbsp; &nbsp; &nbsp; quantity.value = val;&nbsp; &nbsp; }}<!DOCTYPE html>&nbsp; &nbsp; <html >&nbsp; &nbsp; <head>&nbsp; &nbsp; <title>My Page</title>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 1</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantityA' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 2</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityB')"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantityB' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus('quantityB')"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 3</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus('quantityC')"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantityC' value='0'&nbsp; style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus('quantityC')"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; </body>&nbsp; &nbsp; </html>
0

牧羊人nacy

获取当前点击的加号/减号按钮的相对输入，然后进行操作，添加片段：function plus(e){&nbsp; &nbsp; var quantity = e.parentElement.querySelector("#quantity");&nbsp; &nbsp; var count = parseInt(quantity.value || 0)&nbsp; &nbsp; count++;&nbsp; &nbsp; quantity.value = count;}function minus(e){&nbsp; &nbsp; var quantity = e.parentElement.querySelector("#quantity");&nbsp; &nbsp; var count = parseInt(quantity.value || 0)&nbsp; &nbsp; if (count > 0) {&nbsp; &nbsp; &nbsp; count--;&nbsp; &nbsp; &nbsp; quantity.value = count;&nbsp; &nbsp; }}.card {&nbsp; &nbsp; &nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);&nbsp; &nbsp; &nbsp; padding: 16px;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; background-color: #f1f1f1;&nbsp; &nbsp; &nbsp; max-width: 200px;&nbsp; &nbsp; }&nbsp; &nbsp; .row:after {&nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; }&nbsp; &nbsp; .row {margin: 0 -5px;}&nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; width: 15%;&nbsp; &nbsp; &nbsp; padding: 0 10px;&nbsp; &nbsp; }&nbsp; &nbsp; @media screen and (max-width: 600px) {&nbsp; &nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 20px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }<!DOCTYPE html>&nbsp; &nbsp; <html >&nbsp; &nbsp; <head>&nbsp; &nbsp; <title>My Page</title>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 1</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantity' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 2</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantity' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 3</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' id="qtyminus" onclick="minus()"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='quantity' value='0'&nbsp; style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' id="qtyplus" onclick="plus()"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; </body>&nbsp; &nbsp; </html>
0

慕哥9229398

我的解决方案版本。输入元素应该有类quantity，加按钮qtyplus类，减按钮qtyminus类，你不必生成唯一的id...function plus(qty){&nbsp; &nbsp; qty.value++;}function minus(qty){&nbsp; &nbsp; if (qty.value > 0) {&nbsp; &nbsp; &nbsp; qty.value--;&nbsp; &nbsp; }}function quantity() {&nbsp; var qtyInstances = document.getElementsByClassName("quantity");&nbsp; Array.prototype.forEach.call(qtyInstances, function(el) {&nbsp; &nbsp; const wrap = el.parentElement;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const plusBtn = wrap.querySelector('.qtyplus');&nbsp; &nbsp; const minusBtn = wrap.querySelector('.qtyminus');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; plusBtn.addEventListener('click', plus.bind(null, el));&nbsp; &nbsp; minusBtn.addEventListener('click', minus.bind(null, el));&nbsp; });}quantity();.card {&nbsp; &nbsp; &nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);&nbsp; &nbsp; &nbsp; padding: 16px;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; background-color: #f1f1f1;&nbsp; &nbsp; &nbsp; max-width: 200px;&nbsp; &nbsp; }&nbsp; &nbsp; .row:after {&nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; }&nbsp; &nbsp; .row {margin: 0 -5px;}&nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; width: 15%;&nbsp; &nbsp; &nbsp; padding: 0 10px;&nbsp; &nbsp; }&nbsp; &nbsp; @media screen and (max-width: 600px) {&nbsp; &nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 20px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }<!DOCTYPE html>&nbsp; &nbsp; <html >&nbsp; &nbsp; <head>&nbsp; &nbsp; <title>My Page</title>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 1</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' class="qtyminus"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='quantity' type='text' id='quantity1' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' class="qtyplus"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 2</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' class="qtyminus"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='quantity' type='text' id='quantity2' value='0' style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' class="qtyplus"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><b>Item 3</b></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><input type='button' value='-' class="qtyminus"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='quantity' type='text' id='quantity3' value='0'&nbsp; style="width: 40px;" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='+' class="qtyplus"/></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; </body>&nbsp; &nbsp; </html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答