<button> 在 "foreach"

Question

我有两个问题。我正在使用 ado .NET Core。我想显示一系列带有酒名的按钮。当用户单击 Javascript 函数时 - 它会显示葡萄酒的历史。第一个问题：Javascript 函数工作正常，但仅适用于列表的第一个按钮。第二个问题：一开始JSON对象的第二个元素，函数returns对我来说必须有'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，我建议您使用数据属性。这是您的 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);
        }
    });
})});

<button> 在 "foreach"

<button> in a "foreach"

html

javascript

c#

ado.net