Jquery Plus /减号增量器

Question

我希望有一个客户端Plus / Minus系统，用户可以点击加号，值增加1，减去值，值减1，值不应低于零，应该从0开始有没有办法在jquery中做到这一点？所有jquery插件都会查看此操作的OTT位。

任何帮助表示赞赏，ta。

Answer 1

类似的东西：

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

});

Answer 2

var currentValue = 0;

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

将currentValue置于文本字段或其他元素中将是微不足道的。

Answer 3

当然可以，例如：

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

Answer 4

这实际上内置于jQuery - http://jqueryui.com/spinner/

Answer 5

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

Answer 6

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>

Answer 7

在没有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)'>

Answer 8

这是我非常复杂的版本，你需要给班级＆＃34; mkdminusplus＆＃34;你的div： <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>

我已经使用了按钮的引导图标，但你也可以硬编码 - 和+一样！ ;-)希望它会帮助别人！

Answer 9

如果有人希望页面上有超过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> 

Answer 10

这是增加价值和减少价值的简便而动态的方法

这是html部分

template <typename T>
void copytail(T* dest, const T* src, size_t count) {
  constexpr size_t chunk_size = 4 * 32;
  size_t byte_count = sizeof(T) * count;
  size_t chunks = byte_count / chunk_size;
  auto rest = byte_count - byte_count / chunk_size * chunk_size;
  auto rest_vecs = (rest + 31) / 32;
  __m256i* dest256 = (__m256i*)((char *)dest + byte_count - rest_vecs * 32);
  __m256i* src256  = (__m256i*)((char *)src  + byte_count - rest_vecs * 32);
  for (size_t j = 0; j < rest_vecs; j++) {
      _mm256_storeu_si256(dest256 + j, _mm256_loadu_si256(src256 + j));
  }
}

这是jquery的一部分。

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