“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>

     @foreach(var item in ViewBag.Vini)

     { 

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

               <button type="button" class="btnPost" data-tipo-vino="@item.TipoVino" data-nome-vino="@item.NomeVino" value="@item.NomeVino">@item.NomeVino</button>

           </li>

      }

 </ul>

你的 js 看起来像这样：

$(document).ready(function () {

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

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

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

    var item1 = $(event.target).data('nome-vino');

    var item2 = $(event.target).data('tipo-vino');

    

    $.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);

        }

    });

})});