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

Question

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

对于我模型中的每个“人”，我想创建一个显示“显示详细信息”的按钮，当用户单击它时，会切换一个包含有关该人的更多信息的 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();
});

Answer 2

您可以将 id 放在“person_id”之类的标签中，并使用一个类来触发 jquery 事件。

<div class="middle_right">
        <a class="showDetails" href="#" person_id="@Html.Raw("showDetails-" + @person.id)">Show Details</a>
</div> 

在js中

$(".showDetails").click(function () {
        var person_id=$(this).attr("person_id")
});