jquery - несколько кнопок с приращением соответствующего значения при клике

Question

У меня есть ряд кнопок ввода, каждая со своим значением.

<ul class="sizeDriller">
  <li><input type="button" value="S" class="sizeInput" /></li>
  <li><input type="button" value="M" class="sizeInput" /></li>
  <li><input type="button" value="L" class="sizeInput" /></li>
  <li><input type="button" value="XL" class="sizeInput" /></li>
</ul>

Если я нажму на одну из кнопок, я хочу прикрепить количество «1» за клик к соответствующей кнопке, поэтому первое значение кнопки должно быть «S / 1», затем «S / 2», затем "S / 3" и т. Д.

Мой скрипт не работает:

var incr = 0;
$('.sizeInput').bind('click', function()
  {
  var initial = $(this).val();
  var init = parseInt(incr);
  var counter = init+1;
  $(this).attr('value',initial+'/'+counter);
  });
}

Я думаю, что мне нужна какая-то петля, но я никуда не доберусь ...

Спасибо за помощь!

=============================================== ========= Кнопка сброса:

<a href="#" class="resetSize">Reset/a>

Функция сброса:

$('.resetSize').bind('click', function()
  {
  $('.sizeInput').each(function(e)
    {
    var current = $(this).val().split("/")[0];
    $(this).attr('value',current);               
  });
});

Answer 1

Вы можете использовать data () для хранения счетчика:

$('.sizeInput').bind('click', function(){
  var initial = $(this).val();
      if(typeof $(this).data('counter') == "undefined"){
          $(this).data('counter',1); 
      }else{
          $(this).data('counter',$(this).data('counter')+1);
          initial = initial.substr(0,initial.indexOf('/'));
      }

   $(this).val(initial+'/'+$(this).data('counter'));
});

пример: http://jsfiddle.net/niklasvh/etjYL/

Answer 2

<ul class="sizeDriller">
    <li><input type="button" value="S" /><input type="hidden" name="sizeS" value="0" /></li>
    <li><input type="button" value="M" /><input type="hidden" name="sizeM" value="0" /></li>
    <li><input type="button" value="L" /><input type="hidden" name="sizeL" value="0" /></li>
    <li><input type="button" value="XL" /><input type="hidden" name="sizeXL" value="0" /></li>
</ul>

$('.sizeDriller input[type="button"]').bind('click', function(e) {
    var type = $(this).val().split("/")[0];
    var counter = $("input[name='size"+type+"']");

    var newcount = parseInt(counter.val())+1;
    if (newcount > 5) {
        newcount = 0;
    }

    counter.val(newcount);
    $(this).val(type + (newcount > 0 ? ("/" + newcount) : ""));
});

смотри, как работает @ http://jsfiddle.net/roberkules/xVeL8/

Answer 3

Дайте этому шанс:

    <ul class="sizeDriller">
  <li><input type="button" value="S" class="sizeInput" /></li>
  <li><input type="button" value="M" class="sizeInput" /></li>
  <li><input type="button" value="L" class="sizeInput" /></li>
  <li><input type="button" value="XL" class="sizeInput" /></li>
</ul>

<script>
$(document).ready(function() {
var init = 0;
var counter = 0;
$('.sizeInput').bind('click', function()
  {
  var initial = $(this).val().substring(0,1);
  var num = $(this).val().substring(2);
  if (!num) {
    init = 1
        counter = 1;
  } else {
    init = parseInt(num);
    counter = init+1;
  }
  $(this).attr('value',initial+'/'+counter);
  });
});
</script>

Answer 4

$('.sizeInput').bind('click', function(){
    var value = $(this).val(),
        size  = value.split('/')[0],
                // get part after the slash, if it exists, parse as integer
                // if there is no slash and part after it, then 0 is value
                // and then add 1 to the count
        num   = (parseInt(value.split('/')[1], 10) || 0) + 1;
    $(this).val(size + '/' + num);
});

Answer 5

что-то вроде этого

<input type="button" value="S" initialVal="S" class="sizeInput" onclick="changeValue()"/>
....

function changeValue(){

 if ($(this).data('counter')){
   counter++;
 }else {
   $(this).data('counter', 1) //set initial to value1
 }
 $(this).val($(this).attr("initialVal")+'/'+$(this).data('counter'))

}

Answer 6

Попробуйте var counter = init=+1 вместо.