如何添加1到一个值在一个输入字段与javascript点击

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

希望对您有所帮助:

$( "#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项目

这是一个更好的和更可移植的解决方案，它考虑了页面上的多个输入:

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()只是为了确保你的浏览器不会滚动到顶部的锚点击

快捷方式:

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>

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