使用 jQuery click() 处理程序答案

【问题标题】：Using jQuery click() handler使用 jQuery click() 处理程序
【发布时间】：2020-08-18 07:22:13
【问题描述】：

我的 Razor 视图中有下表，它使用 foreach 遍历 ViewBag 项目。如您所见，每个按钮都有其值value="@item.Id"。假设我的 ViewBags 中有十个项目，id 从 1 到 10 开始。

<table class="table">
    <thead>
        <tr>
            <th class="th-sm">Name</th>
            <th class="th-sm">Operation</th>

        </tr>
    </thead>
    @foreach (var item in ViewBag.Guests)
    {
        <tr>
            <td>@item.LastName, @item.FirstName</td>
            <td>
               <button id="btn" value="@item.Id" class="btn btn-info btn-lg">Click Now</button>
            </td>
        </tr>

    }

</table>

我还有一个点击处理程序：

<script>
    $(document).ready(function ()
    {
        $('#btn').click(function () {
            alert($(this).val());
        });
    });
</script>

代码执行后，将显示一个包含 10 条记录的表格以及一个按钮。单击按钮时，我想在浏览器上显示带有用户 ID 的警报。但是，问题是，它只显示警报上的第一个按钮值，并没有显示从第二个按钮到末尾的任何内容。

有人知道我该如何解决这个问题吗？

【问题讨论】：

可能是因为只有一个带有#btn id 的按钮？
ID 是唯一的，不能有 10 个具有相同 ID 的项目。改用类。
我不能使用一个类，因为我已经有一个引导类

标签： javascript jquery frontend

【解决方案1】：

css "id" 和 "class", "#" 和 "."回顾性的

id 需要唯一，class 可以共享。当您想定位多个按钮时，您可以使用 css 类来执行此操作..

请参阅下面的小改动。

<table class="table">
    <thead>
        <tr>
            <th class="th-sm">Name</th>
            <th class="th-sm">Operation</th>

        </tr>
    </thead>
    @foreach (var item in ViewBag.Guests)
    {
        <tr>
            <td>@item.LastName, @item.FirstName</td>
            <td>
               <button class="btn btn-info btn-lg" id="btn-@item.Id"  
                 value="@item.Id">Click Now</button>
            </td>
        </tr>

    }

</table>

<script>
    $(document).ready(function ()
    {
        $('.btn').click(function () {
            alert($(this).val());
        });
    });
</script>

【讨论】：