jquery - 输入 val 需要在点击时更改

Question

输入 val 需要在点击时更改

这是我的代码

<div class="inputQty">
     <span>
        <small class="up">^</small>
         <small class="down">V</small>
     </span>
     <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/>
 </div>

如果我们单击“.up”输入 val 更改为 1++，如果我们单击“.down”输入 val 更改为 1- -

请帮我

ja 小提琴在这里http://jsfiddle.net/X57Mz/

Answer 1

用这个：

$(function(){
  $('.up').on('click',function(){
     $('.input-quantity').val(parseInt($('.input-quantity').val())+1);
  });

  $('.down').on('click',function(){
     $('.input-quantity').val(parseInt($('.input-quantity').val())-1);
  });
});
​

工作小提琴

Answer 2

可以这样做。检查 jsfiddle http://jsfiddle.net/X57Mz/4/的工作示例

$(document).ready(function() {

    $(".up").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())+1); 
    });

    $(".down").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())-1); 
    });
});​

如果你不想去负数并且想要非负框，你可以这样做

$(document).ready(function() {

    $(".up").click(function() {
       $(".input-quantity").val(parseInt($(".input-quantity").val())+1); 
    });

    $(".down").click(function() {
      if(parseInt($(".input-quantity").val())>0)
       $(".input-quantity").val(parseInt($(".input-quantity").val())-1); 
    });
});​

这是jsfiddle http://jsfiddle.net/X57Mz/6/

Answer 3

演示 http://jsfiddle.net/7hzcB/6/

jQuery代码

<script type="text/javascript"> 
 $(function() {
    $(".up").click(function() {
        $(".input-quantity").val(parseInt($(".input-quantity").val()) + 1)
    });
    $(".down").click(function() {
        $(".input-quantity").val(parseInt($(".input-quantity").val()) - 1)
    });
}); 

 </script>​​​​​​​​​​​​​​​​​​

html

<div class="inputQty"> 
         <span> 
            <small class="up">^</small> 
             <small class="down">V</small> 
         </span> 
         <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/> 
     </div> 

Answer 4

这是你的代码..

$('.up').click(function()
{

 var temp=$('.input-quantity').val();

    $('.input-quantity').val(parseInt(temp)+parseInt(1));

});

$('.down').click(function()
{

 var temp=$('.input-quantity').val();

    $('.input-quantity').val(parseInt(temp)-parseInt(1));

});

Answer 5

获取当前值，将其增加 1，替换该值：

$(document).ready(function(){
    $('.up').on('click',function(){
        var value = parseInt($('.input-quantity').first().val());
        value++;
        $('.input-quantity').first().val(value);
                         
    });
});​

演示

让向下按钮工作是对上述代码的简单修改。

Answer 6

$('.inputQty small').on('click', function() {

    var cls = $(this).hasClass('up'); // check that it has up class
    $('.input-quantity').val(function() {
        // if up class exists then increase value by 1 else decrease by 1
        return cls ? parseInt(this.value) + 1 : parseInt(this.value) - 1;
    });
});

工作样本

Answer 7

另一个演示 http://jsfiddle.net/3v3YL/2/

代码B-)

var inputval = parseInt($('.input-quantity').val());

$(".up").click(function(){

    $('.input-quantity').val(inputval++);

});

$(".down").click(function(){

     $('.input-quantity').val(inputval--);
});
​

Answer 8

$(document).ready( function() {
  var el = $('#test');
  function change( amt ) {
    el.val( parseInt( el.val(), 10 ) + amt );
  }

  $('.up').click( function() {
    change( 1 );
  } );
  $('.down').click( function() {
    change( -1 );
  } );
} );