jquery - multiple buttons with respective value incrementing on click

I have a range of input buttons, each with its own value.

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

If I click on one of the buttons, I want to attach a qty of "1" per click to the respective button, so the first button value should go "S/1", then "S/2", then "S/3" and so on.

My script is not really working:

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

I think I need some kind of loop, but I am not getting anywhere...

Thanks for help!

======================================================== Reset button:

<a href="#" class="resetSize">Reset/a>
开发者_运维知识库

Reset function:

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

You could use data() to store the counter:

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

example: http://jsfiddle.net/niklasvh/etjYL/

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

see it working @ http://jsfiddle.net/roberkules/xVeL8/

Try var counter = init=+1 instead.

what about something like this

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

}

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

Give this a shot:

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