如何通过在 Razor 页面中单击按钮来增加计数器

Question

你好，我尝试在我的 Razor 页面上实现 Jquery 第一个工作。但是我找不到根本原因，为什么在 foreach 之后它不起作用。

我的Html:

    @foreach(var item in Model.ErrorList)
    {
        <input  type="button" id=@item.ErrorListID value=@item.ErrorName />
        <input type="text" name="Tb+@item.ErrorListID" id="Tb+@item.ErrorListID" value="0" />

    }

工作脚本：

        <script>
            $(document).ready(function(){
             //var counter = $('#TextBox').val();
                $('#AddButton').click( function() {
                    var counter = $('#TextBox').val();
                    counter++ ;
                    $('#TextBox').val(counter);
                });
            });
        </script>

和所有按钮的 JQ。一定有什么错误:-(

@foreach (var item in Model.ErrorList)
{
    <script>
    $(document).ready(function(){
        //var counter = $('#TextBox').val();
        $('#@item.ErrorListID').click( function() {
            var counter = $('#Tb+@item.ErrorListID').val();
            counter++ ;
            $('#Tb+@item.ErrorListID').val(counter);
        });
    });
    </script>
}
}

Answer 1

在按钮上使用 class，您将解决该问题。

每次单击按钮，您都可以定位“下一个”input。

@foreach(var item in Model.ErrorList)
{
    <input type="button" class="incrementer" id=@item.ErrorListID value=@item.ErrorName />
    <input type="text" name="Tb+@item.ErrorListID" id="Tb+@item.ErrorListID" value="0" />
}

然后，你只需要一个事件处理器：

$(document).ready(function(){
    
    $('.incrementer').click( function() {
        let nextInput = $(this).next("input")
        let count = parseInt(nextInput.val()) + 1
        nextInput.val(count)
    });
});

如何通过在 Razor 页面中单击按钮来增加计数器

How to increment counter with button click in Razor pages

jquery

razor-pages