Question

我有这个html（用Razor在表中显示行）：

            @foreach (var item in Model.AllGroups)
            {
                <tr class="group-row" data-id="@item.Id">
                    <td class="align-middle text-primary">
                        <h4 class="group-name" > @Html.DisplayFor(m => item.Name)</h4>
                    </td>
                    <td>
                        <a class="btn btn-small btn-primary detail-group-btn">
                            <i class="fas fa-user text-white"></i>
                        </a>
                        <a class="btn btn-small btn-secondary edit-group-btn">
                            <i class="fa fa-edit text-primary"></i>
                        </a>
                        <a class="btn btn-small btn-danger delete-group-btn">
                            <i class="fa fa-trash text-white bg-"></i>
                        </a>
                    </td>
                </tr>
            }

我在delete-group-btn按钮上绑定了一个点击事件，当我单击时，我想检索<H4>标签的文本值。

在这一步，我正在这样做：

$(this).closest('.group-row').find('.group-name').text()

我可以工作，但是我不确定这是正确和优化的方法。

有更好的解决方案吗？

Answer 1

由于您可能有多行（因为运行了foreach），因此可以为每行中的h4元素分配唯一的ID。

例如对于第一行中的h4元素，id =“ h4_0”，第二行中的h4元素，id =“ ht_1”，...

然后，您可以向每个以行索引为参数调用某些功能的按钮添加“ onclick”属性。在该函数中，您将行索引与 “ h4_”，并且在同一行中有一个ID为h4的元素。

第一行示例：

<h4 class="group-name" id="h4_0" > @Html.DisplayFor(m => item.Name)</h4>


<a class="btn btn-small btn-danger delete-group-btn" onclick="doSomething(0)">

<script>
    function doSomething(rowIndex) {
        var h4Id = "h4_" + rowIndex;
        // Do something ...
    }
</script>

这不是最好的解决方案，但它也可以工作：）

Answer 2

我会将ID添加到“数据目标”属性中，如下所示：

@foreach (var item in Model.AllGroups)
        {
            <tr class="group-row" data-id="@item.Id">
                <td class="align-middle text-primary">
                    <h4 class="group-name" id="@item.Id"> @Html.DisplayFor(m => item.Name)</h4>
                </td>
                <td>
                    <a class="btn btn-small btn-primary detail-group-btn">
                        <i class="fas fa-user text-white"></i>
                    </a>
                    <a class="btn btn-small btn-secondary edit-group-btn">
                        <i class="fa fa-edit text-primary"></i>
                    </a>
                    <a class="btn btn-small btn-danger delete-group-btn" data-target="@item.Id">
                        <i class="fa fa-trash text-white bg-"></i>
                    </a>
                </td>
            </tr>
        }

要这样检索：

$( '#' + $(this).data('target') ).text();

使用jQuery检索表中的文本值

2 个答案: