Question

这是我的代码，其中我使用了两个<textbox>和两个<button>代码。我的目标是在点击相应的按钮后，我想在<textbox>中增加值：

<!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++时，行为不会重复。

Answer 1

问题是，你并没有真正做任何事情来找到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>

Answer 2

试试这段代码：

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

使用不同的ID

2 个答案: