2017-09-02 81 views
0

这是我的代码,在其中我使用了两个<textbox>和两个<button>标签。我们的目标是,我想点击它的各个按钮后增加一个<textbox>值:按钮单击不同ID时文本框的递增值

<!DOCTYPE html> 
<html> 
<head> 
    <title> My first increment </title> 
</head> 
<body> 

    <input type="text" name="TextBox" id="TextBox1" value="0" /> 
    <input type="Button" id='AddButton1' value="+" /> 

    <input type="text" name="TextBox" id="TextBox2" value="0" /> 
    <input type="Button" id='AddButton2' value="+" /> 


    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      var i = 1; 
      $('#AddButton'+i).click(function() { 
       var counter = $('#TextBox'+i).val(); 
       counter++ ; 
       $('#TextBox'+i).val(counter);    
      }); 
      i++; 
     }); 
    </script> 
</body> 

我的问题是,我不能够在一个循环递增值。

对于单个<textbox>内部值正在递增,但是当我使用i++时,行为不会重复。

+0

让我看看,如果我理解正确。你想点击按钮1并在第一个文本框上增加?然后点击第二个按钮并为第二个文本框做?为什么你要通过这种方法呢? – Valkyrie

+0

有没有其他方法可以帮助初学者 – Peace

+1

我给出了一个答案,但是要指出你使用的jQuery版本是超旧的。尝试升级以获得更好的体验。 –

回答

3

事情是,你没有真正做任何事情来找到Id。你不能只增加任何东西。这是我想做到这一点:

<!DOCTYPE html> 
<html> 
<head> 
    <title> My first increment </title> 
</head> 
<body> 
    <input type="text" name="TextBox" id="TextBox1" value="0" /> 
    <input type="Button" id='AddButton1' value="+" /> 
    <input type="text" name="TextBox" id="TextBox2" value="0" /> 
    <input type="Button" id='AddButton2' value="+" /> 

    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script> 
     $(document).ready(function(){ 

      $('#AddButton1, #AddButton2').click(function(){ 
       var id = $(this).attr('id').replace(/AddButton/, ''); 
       var num = parseInt($('#TextBox' + id).val()); 
       num++; 
       $('#TextBox' + id).val(num);    
      }); 
     }); 
    </script> 
</body> 
1

试试这个代码:

$(document).ready(function(){ 
    $('[id^="AddButton"]').click(function() { 
     var counter = $(this).prev().val(); 
     counter++ ; 
     $(this).prev().val(counter);   
    }); 
}); 
相关问题