亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

獨立工作的 HTML、Javascript 多個按鈕

獨立工作的 HTML、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 名稱作為參數傳遞給函數：


<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>


查看完整回答
反對 回復 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>

    <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>


查看完整回答
反對 回復 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>

    <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>


查看完整回答
反對 回復 2021-12-02
  • 3 回答
  • 0 關注
  • 281 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號