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

请尝试var counter = init=+1。

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>

jquery - 单击时各个值递增的多个按钮

6 个答案: