如何在點擊的javascript中將1添加到輸入字段中的值？

Question

我有一個購物車，我想實現每件商品的更新數量。讓我向您展示該代碼，它可能會更容易解釋。

HTML：

<div class="custom-quantity-input">
  <input type="text" name="quantity" class="" value="<?php echo $items['qty']; ?>">
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up"></i></a>
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down"></i></a>
</div>

我希望當用戶單擊鏈接添加項以增加輸入字段上的數量，並且當他們單擊#decrease以減少輸入字段中的數量一次時，在視覺上沒有AJAX或其他任何內容。

我對JavaScript的了解不多，所以我尋求您的幫助。

Answer 1

 $(function(){ $(".quantity-input-up").click(function(){ var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]"); var val = parseInt(inpt.val()); if ( val < 0 ) inpt.val(val=0); inpt.val(val+1); }); $(".quantity-input-down").click(function(){ var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]"); var val = parseInt(inpt.val()); if ( val < 0 ) inpt.val(val=0); if ( val == 0 ) return; inpt.val(val-1); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-quantity-input"> <input type="number" min="0" name="quantity" class="" value="5"> <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a> <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a> </div> <div class="custom-quantity-input"> <input type="number" min="0" name="quantity" class="" value="9"> <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a> <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a> </div> <div class="custom-quantity-input"> <input type="number" min="0" name="quantity" class="" value="200"> <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a> <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a> </div> 

Answer 2

快速方式：

 function initCartCounter(input, upBtn, downBtn) { upBtn.onclick = () => input.value++; downBtn.onclick = () => input.value--; } //No matter which way you get these elements initCartCounter( document.getElementById('val'), document.links[0], document.links[1] ); 

 <input id="val" type="number" value="0"/> <a href="javascript:;">Add</a> <a href="javascript:;" >Sub</a> 

更加干凈和可擴展：

 !function() { document.querySelectorAll('.cart') .forEach(cart => { let input = cart.querySelector('.cart-number'); cart.querySelector('.cart-number-inc') .addEventListener('click', () => input.innerText = (input.innerText|0)+1); cart.querySelector('.cart-number-dec') .addEventListener('click', () => input.innerText = (input.innerText|0)-1); }) }(); 

 .pointer {cursor: pointer;} 

 <div class="cart"> <span class="cart-number">0</span> <span class="cart-number-inc pointer">Add</span> <span class="cart-number-dec pointer">Dec</span> </div> 

---

imo最好的方法是使用本機input[type=number] ：

 <input type="number" value="0"/> 

Answer 3

我希望這有幫助：

 $( "#more" ).click(function() { var qtt = parseInt($('#quantity').val(), 10); $('#quantity').val(qtt+1); }); $( "#less" ).click(function() { var qtt = parseInt($('#quantity').val(), 10); if (qtt > 0) { //does not allow negative values $('#quantity').val(qtt-1); } }); 

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <input type="text" id="quantity" value="5"> <button id="more" type="button">+</button> <button id="less" type="button">-</button> 

不要忘記包括jQuery項目。

Answer 4

這是一個更好且更可移植的解決方案，可解決頁面上的多個輸入：

 jQuery(function($) { $(".quantity-btn").on("click", function(e) { e.preventDefault(); // Don't scroll top. var $inp = $(this).closest("div").find("input"), // Get input isUp = $(this).is(".quantity-input-up"), // Is up clicked? (Boolean) currVal = parseInt($inp.val(), 10); // Get curr val $inp.val(Math.max(0, currVal += isUp ? 1 : -1)); // Assign new val }); // Other DOM ready code here }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-quantity-input"> <input type="text" name="quantity" class="" value="0"> <a href="#" class="quantity-btn quantity-input-up">&#9650;</a> <a href="#" class="quantity-btn quantity-input-down">&#9660;</a> </div> <div class="custom-quantity-input"> <input type="text" name="quantity" class="" value="2"> <a href="#" class="quantity-btn quantity-input-up">&#9650;</a> <a href="#" class="quantity-btn quantity-input-down">&#9660;</a> </div> 

event.preventDefault()只是為了確保您的瀏覽器在錨點單擊時不會滾動到頂部。