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

尝试var counter = init=+1代替。

Answer 3

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

怎么样像这样

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

$('.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 6

给这一个镜头：

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