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 fiddle here 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);
  });
});

Working Fiddle

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

    });
});

Demo

让向下按钮工作是对上述代码的一个微不足道的修改。

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

<强> Working Sample

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

输入val需要在点击时更改

8 个答案: