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>

我希望当用户点击链接add-one以增加输入字段的数量时，当他们点击#decrease减少一个输入字段上的数量时，视觉上没有AJAX或任何东西。

我不太了解JavaScript，这就是我寻求帮助的原因。

Answer 1

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

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

我希望这会有所帮助：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

不要忘记包含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()只是为了确保您的浏览器在锚点击时不会滚动到顶部。

如何在点击时使用javascript在输入字段中为值添加1？

4 个答案: