logo标签列表

Jquery加减增量器

jquery
5
我希望有一个客户端的加减系统，用户可以点击加号来增加1，点击减号来减少1，该值不应该小于0并且应该从0开始。是否有一种简单的jquery方法来实现这个功能？所有的jquery插件看起来都有点过于复杂了。
非常感谢您的帮助。
像这样使用jQuery增加TextInput的值，类似于Spinner吗？ - mre
4
我希望这是一项作业！我太不擅长 Jquery 了 :) - 1''''
10个回答
12

像这样：

HTML：

<a id="minus" href="#">-</a>
<span id="value">0</span>
<a id="plus" href="#">+</a>

Javascript:

$(function(){

    var valueElement = $('#value');
    function incrementValue(e){
        valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
        return false;
    }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

});
由于某种原因，当使用add时，它会像0、01、011、0111等一样递增。 - 1''''
2
刚刚意识到它需要解析为整数！变量值为 parseInt($('#value').text(value))； - 1''''
2
哇，这个代码真的可以进行重构！ - Josh Stodola
@Josh重构是指“很好”的意思，还是指“很糟糕”的意思？ - Rowan
1
现在好了吗？我把你的评论看作是一种挑战。如果确实有更好的方法，我很愿意知道：自我提升是我们领域的首要目标！ - Rowan
3
var currentValue = 0;

$(document).ready(function() {
  $('#up').click(function() {
    currentValue++;
  });
  $('#down').click(function() {
    if (currentValue > 0) {
      currentValue--;
    }
  });
});

把currentValue放入文本框或其他元素中就变得非常简单。
2
当然可以，例如：
<span id="minus"> - </span>       
<span id="value"> 0 </span>
<span id="plus"> + </span>

<script type="text/javascript">  
   $(function() {
      var value = parseInt($('#value').text(value));

      $('#minus').click(function() {
         if (value == 0) return;
         value--;
         $('#value').text(value);
      }

      $('#plus').click(function() {
         value++;
         $('#value').text(value);
      }
  });
</script>
2
1

一种非常简单的方法是不使用JQuery...

<script language=javascript>
function process(v){
    var value = parseInt(document.getElementById('v').value);
    value+=v;
    document.getElementById('v').value = value;
}
</script>

<input type=button value='-' onclick='javascript:process(-1)'>
<input type=test size=10 id='v' name='v' value='0'>
<input type=button value='+' onclick='javascript:process(1)'>
1
<span id="value">5</span>
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

$('#plus').click(function() { changeValue(1); });
$('#minus').click(function() { changeValue(-1); });

function changeValue(val) {
    var container = $('#value');
    var current = parseInt(container.html(), 10);

    container.html(Math.max(0, current + val).toString());
}
1

jQuery 部分

// initialize counter
var counter = 0;

// set the + functionality
$('#plus').click( function(){$('#display').html( ++counter )} );
// set the - functionality
$('#minus').click( function(){$('#display').html( (counter-1<0)?counter:--counter )} );
// initialize display
$('#display').html( counter );

以及 HTML 部分

<span id="plus">+</span>
<span id="minus">-</span>
<div id="display"></div>
1
如果有人想在页面上拥有多个递增的输入字段。 检查是否点击了.plus或.minus，然后更改兄弟输入的值，这样您可以拥有任意数量的字段。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>

       <div> 
          <a class="minus increment" href="#">-</a>
          <input type="text" id="adults" size="10" value="0">
          <a class="plus increment" href="#">+</a>            
       </div>

       <div>   
          <a class="minus increment" href="#">-</a>
          <input type="text" id="children" size="10" value="0">
          <a class="plus increment" href="#">+</a>
        </div>

<script type="text/javascript">  
   $(function(){
     $('.increment').click(function() {
        var valueElement = $('#'+$(this).siblings('input').attr('id'));

        if($(this).hasClass('plus')) 
        {
           valueElement.val(Math.max(parseInt(valueElement.val()) + 1));
        } 
        else if (valueElement.val() > 0) // Stops the value going into negatives
        {
           valueElement.val(Math.max(parseInt(valueElement.val()) - 1));
        } 

     return false;
});

});
</script>
1
这是一种简单而动态的增减数值的方法。
这是HTML部分。
  <div class="input-group">
  <div class="input-group-prepend">
  <span class="input-group-text" onclick="decrement(this);"><i class="la la-minus- 
   circle"></i></span></div>
   <input type="text" class="form-control adults" value="0">
   <div class="input-group-append">
   <span class="input-group-text" onclick="increment(this);"><i class="la la-plus- 
   circle"></i></span></div></div>

这是jQuery部分。
    function increment(obj)
    {
    var count = parseInt($(obj).parent().parent().find('input').val());
    $(obj).parent().parent().find('input').val(count+1);
   }

   function decrement(obj)
   {
    var count = parseInt($(obj).parent().parent().find('input').val());
    if(count != 0)
    {
       $(obj).parent().parent().find('input').val(count - 1);  
    }

}
0
这是我更复杂的版本，你只需要给你的div类“mkdminusplus”：<div class="mkdminusplus" defaultval="50"></div> 然后添加。
<script>
jQuery(function(){

  jQuery('.mkdminusplus').append('<span class="mkdminus"><i class="icon-minus-sign"></i></span><input class="mkdvalue" type="number" value=""><span class="mkdplus"><i class="icon-plus-sign"></i></span>');

  jQuery('.mkdminusplus').each(function(){
    if (jQuery(this).attr('defaultval') == undefined) jQuery(this).attr('defaultval','0');
    jQuery(this).find('.mkdvalue').val(jQuery(this).attr('defaultval'));
  });
  jQuery('.mkdminus').bind('click',  function() {
        valueElement=jQuery(this).parent().find('.mkdvalue');
        defaultval=(jQuery(this).parent().attr('defaultval') !== 'undefined' && jQuery(this).parent().attr('defaultval') !== 'false' )?jQuery(this).parent().attr('defaultval'):jQuery(this).parent().attr('defaultval','0');
        console.log(jQuery.isNumeric(parseInt(valueElement.val())))
        if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
        var increment=-1;
        valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
  });


   jQuery('.mkdplus').bind('click',  function() {
        valueElement=jQuery(this).parent().find('.mkdvalue');
        defaultval=(jQuery(this).parent().attr('defaultval') !== undefined && jQuery(this).parent().attr('defaultval') !== 'false' )?parseInt(jQuery(this).parent().attr('defaultval')):parseInt(jQuery(this).parent().attr('defaultval','0'));
        console.log(jQuery.isNumeric(parseInt(valueElement.val())))
        if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
        var increment=1;
        valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
  });

  jQuery('.mkdvalue').on('keyup', function () {
        jQuery(this).val(jQuery(this).val().replace(/[^0-9]/gi, ''));
  });

});

</script>

我已经使用了Bootstrap图标来制作按钮，但你也可以硬编码“-”和“+”符号！;-) 希望这能帮助其他人！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接