javascript - 如何Javascript切换运行时生成的div的ID

Question

我正在将模型发送到 MVC 中的 View ，

对于模型中的每个“人”，我想创建一个显示“显示详细信息”的按钮，当用户单击它时，会切换一个包含该人更多信息的 div。

我正在生成分配给每个人员 ID 的 a href 和 div id，如下所示:

   foreach (var person in Model.Persons)
        {
        <div>
            <a href="#" id="@Html.Raw("showDetails-" + @person.id)">Show Details</a>
        </div> 
        <div id="@Html.Raw("detailsDiv-" + @person.id)">
        <!--Content Here -->
        </div>

        }

我想创建在点击事件上切换的 JavaScript

所以我想编写这个脚本，但每个人都有唯一的 id:

我想获取需要切换的div的id。

我尝试在 foreach 循环中编写脚本，以便能够读取 @person.id 值，但它不起作用:

<script>
    $(document).ready(function () {
        $("#showDetails-@person.id").click(function () {
            $("#details-@person.id").toggle();
        });
    });
</script>

有人可以帮忙吗？

Answer 1

将一个类添加到您的链接中，例如class="showDetails"。

现在您可以为所有链接创建一个全局事件:

$('.showDetails').click(function(e) {
   var id = this.id // extract id.. split with '-' or whatever..
   $('#details-' + id).toggle();
});