<button> 在“foreach”中

【问题标题】：<button> in a "foreach"<button> 在“foreach”中
【发布时间】：2020-12-07 20:29:48
【问题描述】：

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

<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);
            }
        });
    })
});

【问题讨论】：

• 只有第一个按钮起作用的原因是因为您在按钮上使用了 id。 id 应该是唯一的。这意味着只能有 1 个具有特定 id 的按钮。但是，类可以根据需要多次使用，并允许您使用单个类名选择多个元素。
• 好的。谢谢！！！我有正确的，现在我使用这个类。但是对于我选择的每个值，它都会获得第一个值并将其搜索到数据库中。
• $('.nomeVino').val() 只会获取与“nomeVino”类匹配的第一个元素的值。 .val() 的 jQuery 文档中提到了这一点。您是否真的希望它从与单击的按钮位于同一 <li> 的类的字段中返回值？
• 没有。它在另一个
• 中。示例：<li><input type="hidden" value="vino1"><button class="btnPost" ></button><li> <br> `<li><input type="hidden" value="vino2"><button class="btnPost"></button><li>。我点击第二个按钮，我想要列表中第二个按钮的值。