将详细信息按钮添加到动态 HTML 列表答案

【问题标题】：Adding a details button to a dynamic HTML list将详细信息按钮添加到动态 HTML 列表
【发布时间】：2018-08-24 12:18:59
【问题描述】：

我有一个使用过滤数据动态生成的 HTML 列表。

<tbody>
            @{
                foreach (var item in listado.Where(x => x.Raw != null)) {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Usuario</td>
                        <td>@item.NIF_CIF</td>
                        <td>
                            @if (!(String.IsNullOrEmpty(item.Telefono)) && !(String.IsNullOrWhiteSpace(item.Telefono))) {
                                @item.Telefono
                            } else {
                                @Html.Raw("No disponible")}
                        </td>
                        <td>@Math.Round(item.PrecioTotal)&nbsp;&euro;</td>
                        <td>@item.FechaCreacion.ToShortDateString()</td>
                        <td>
                            <button id="detalles@(item.Id)">Detalles</button>
                        </td>
                    </tr>
                    <tr id="vistaDetalles@(item.Id)" hidden>
                        <td>Detalles del presupuesto</td>
                    </tr>
                }
            }
        </tbody>

我尝试使用 item.Id 标记按钮，然后在此脚本中指向它：

<script>
$("document").ready(function (Id) {
    $("#detalles"+ Id).click(function (Id) {
        $("#vistaDetalles" + Id).show();
    });
});</script>

我还尝试不标记它们并捕获所有按钮（删除 +Id 部分）以及捕获所有隐藏 td 的相同技术，但没有任何效果。我究竟做错了什么？另外，你能推荐一些学习材料，这样我可以更清楚地了解这部分吗？提前致谢。问候。

【问题讨论】：

您的脚本在某些方面完全错误，请从 document.ready 函数中删除 Id。将 $("#detalles"+ Id).click(function (Id) 替换为 $(document).on("click", "id^=detalles", function () {
那也行不通。我知道我没有固定按钮或 tds 正确，但不知道如何正确地做到这一点。

标签： javascript c# jquery html

【解决方案1】：

您可以为此目的使用数据属性

HTML

<button class="detalles" data-itemid="@item.Id">Detalles</button>

jQuery

$(".detalles").on("click",function(){
   var itemId = $(this).data('itemid');
   $('#vistaDetalles'+itemId).show();
});

【讨论】：

非常感谢您的回答。这实际上有效，但仅适用于列表的第一个按钮。不知道错在哪里，但再次感谢。
@dCarMal，那是因为迭代时 id 必须保持不变。将id="detalles" 更改为class="detalles"。让我稍后更新答案。我忘了可视化
@dCarMal，立即查看
就是这样！非常感谢，解决了问题。现在每个按钮都会滑动我想要的详细信息字段。再次感谢大家的支持。

【解决方案2】：

我会用

替换你的按钮

<button onclick="detalles(@item.Id)">Detalles</button>

并将您的 JavaScript 更改为：

<script>
    function detalles(Id) {
        $("#vistaDetalles" + Id).show();
    };
</script>

【讨论】：

感谢您的回答。我试过了，没有用，但看起来很有希望。也许我在其他地方有错误？
尝试将 $("#vistaDetalles" + Id).show() 替换为 $("#vistaDetalles" + Id).removeAttr('hidden')。但是请记住，一旦它们显示出来，您就不会隐藏它们。因此，如果您单击多个条目的详细信息，它们都会显示出来。

【解决方案3】：

试试看：-

<script>
$("document").ready(function (Id) {
    $("body").on("click","#detalles"+ Id, function (Id) {
        $("#vistaDetalles" + Id).show();
    });
});</script>

【讨论】：