Jquery Plus / Минус Инкрементатор

Question

Я хочу иметь клиентскую систему Плюс / Минус, где пользователь может нажать на плюс, и значение увеличивается на 1, минус и значение уменьшается на 1, значение никогда не должно опускаться ниже нуля и должно начинаться с 0Есть ли способ сделать это просто в jquery?Все плагины jquery смотрят на бит OTT для этой операции.

Любая помощь приветствуется, т.

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

Это фактически встроено в jQuery - http://jqueryui.com/spinner/

Answer 4

Конечно, вы можете, например .:

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

Очень простой способ сделать это без 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 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

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

Если кто-то хочет, чтобы на странице было более 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 9

Вот моя более сложная версия, вам просто нужно дать класс "mkdminusplus" вашему 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>

Я использовал иконки начальной загрузки для кнопок, но вы также можете использовать жесткий код - и + как есть! ;-) Надеюсь, это поможет другим!