javascript: 如何从 foreach 获取 data-id 上的每个记录 id？

Question

我有一个类别列表表，它从 foreach 获取记录。每行都有删除按钮，该按钮有 data-id 从该行获取 id。我还有一个获取数据 ID 的函数。但有一个问题，我总是得到第一个记录id。

like this

Source

Global.js: 

    function DeleteCategory() {
                var Id = $("#Cid").attr("data-id");
                alert(Id); 
            }

索引.cshtml:

  <tbody>
                                @foreach (var item in Model)
                                {
                                    <tr>
                                        <td><span class="label label-success">@item.Id</span></td>
                                        <td>@item.CategoryName</td>
                                        <td>
                                            @if (item.IsActive)
                                            {
                                                <b  class="label label-success">Active</b>
                                            }
                                            else
                                            {
                                                    <b  class="label label-danger">Passive</b>
                                            }
                                        </td>
                                        <td>Server updates and maintenance</td>
                                        <td><a href="#">Admin</a></td>
                                        <td>
                                            <button class="btn btn-default btn-sm" id="editId" onclick="" data-id="">Edit</button>
                                            @*@Html.ActionLink("Delete","Delete", new {id=item.Id },new { onclick = "return confirm('Do you want to delete this row?')"})*@
                                            <button class="btn btn-default btn-sm" id="Cid" onclick="DeleteCategory()" data-id="@item.Id">Delete</button>
                                        </td>
                                    </tr>

                                }

Answer 1

元素的

id 属性在页面上必须是唯一的。这意味着不允许有 2 个或多个具有相同 id 的元素。只有具有此 id 的第一个元素才会被视为真实元素。您可以使用类来代替。

但在您的情况下，将 itemId 直接传递给您的 DeleteCategory 函数会更容易:

<button class="btn btn-default btn-sm" id="Cid" onclick="DeleteCategory(@item.Id)">Delete</button>

并修改为:

function DeleteCategory(Id) {
    alert(Id); 
}