“foreach”中的 <button>

Question

我有两个问题。我正在使用 ado .NET Core。我想显示一系列带有酒名的按钮。当用户单击 Javascript 函数时 - 它会显示葡萄酒的历史记录。第一个问题：Javascript 函数工作正常，但仅适用于列表的第一个按钮。第二个问题：函数返回给我的 JSON 对象的第二个元素一开始必须包含“display: none”。这是代码：（谢谢）

<ul>

                    @foreach(var item in ViewBag.Vini)

                    { 

                        <li class="col-lg-12 col-sm">

                                <input type="hidden" class="tipoVino" value="@item.TipoVino"/>

                                <input type="hidden" class="nomeVino" value="@item.NomeVino"/>

                                <button type="button" class="btnPost" value="@item.NomeVino">@item.NomeVino</button>

                        </li>

                    }

                </ul>

$(document).ready(function () {

    $('.btnPost').on('click', function () {

        document.getElementById("text1").style.display = "none";

        document.getElementById("text1").style.display = "block";

        var item1 = $('.nomeVino').val();

        var item2 = $('.tipoVino').val();

        

        $.ajax({

            type: "POST",

            url: "?handler=Send",

            beforeSend: function (xhr) {

                xhr.setRequestHeader("XSRF-TOKEN",

                    $('input:hidden[name="__RequestVerificationToken"]').val());

            },

            data: JSON.stringify({

                Item1: item1,

                Item2: item2

            }),

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (response) {

                var dvItems = $("#text");

                dvItems.empty();

                $.each(response, function (i, item) {

                    var $tr = $('<p id=par' + i + '>').append(item).appendTo(dvItems); 

                });

            },

            failure: function (response) {

                alert(response);

            }

        });

    })

});

Answer 1

对于你原来的问题，我看到你已经编辑了它，因为你已经从 ids 更改为类，正如 Emiel Zuurbier 所评论的那样。您仍然遇到的问题在这里：var item1 = $('.nomeVino').val();var item2 = $('.tipoVino').val();这将始终检索 DOM 中找到的类“nomeVino”和“tipoVino”的第一个项目的值。在 ajax 请求中向后端发送数据时，您正在使用变量 item1 和 item2，因此无论按哪个按钮，您都将始终发送相同的值。由于您已经在使用 jQuery，我建议使用数据属性。以下是使用 data- 属性的 HTML 的示例：<ul>&nbsp; &nbsp; &nbsp;@foreach(var item in ViewBag.Vini)&nbsp; &nbsp; &nbsp;{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="col-lg-12 col-sm">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="button" class="btnPost" data-tipo-vino="@item.TipoVino" data-nome-vino="@item.NomeVino" value="@item.NomeVino">@item.NomeVino</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; }&nbsp;</ul>你的 js 看起来像这样：$(document).ready(function () {$('.btnPost').on('click', function (event) {&nbsp; &nbsp; document.getElementById("text1").style.display = "none";&nbsp; &nbsp; document.getElementById("text1").style.display = "block";&nbsp; &nbsp; var item1 = $(event.target).data('nome-vino');&nbsp; &nbsp; var item2 = $(event.target).data('tipo-vino');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: "?handler=Send",&nbsp; &nbsp; &nbsp; &nbsp; beforeSend: function (xhr) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader("XSRF-TOKEN",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input:hidden[name="__RequestVerificationToken"]').val());&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; data: JSON.stringify({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Item1: item1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Item2: item2&nbsp; &nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; &nbsp; contentType: "application/json; charset=utf-8",&nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dvItems = $("#text");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dvItems.empty();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(response, function (i, item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $tr = $('<p id=par' + i + '>').append(item).appendTo(dvItems);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; failure: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(response);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });})});