Question

请考虑以下代码：

<body>
    @for (int i = 0; i < Model.Count(); i++)
    {

        @Html.TextBoxFor(model => Model[i].Name)
        @Html.ValidationMessageFor(model => Model[i].Name)

        <button id="open" onclick="activate()" class="btn btn-default">Open</button>
        <div id="box" style="display: none">
            Hi @Html.TextBoxFor(model => Model[i].Name)
        </div>


    }
    <script type="text/javascript">
        function activate() {
            $('#box').show();

        }

    </script>
</body>

从上面的代码中可以看出，当用户点击＆＃34;打开＆＃34;时，ID为＃＆＃34;框＆＃34;将会显示，但是，我想要的是显示多个div id Box，取决于For-loop。目前，按钮可以成功生成，但只有一个框，因为它们都引用相同的ID＆＃34;框＆＃34;。是否可以复制或添加索引到id =＆＃34;框＆＃34;，所以框的数量将取决于for循环？

Answer 1

虽然复制JS是实现这一目标的一种方式，但它并不是很干。鉴于您当前的代码，您还会遇到使用重复id属性的问题，因为它们在DOM中必须是唯一的。

更好的解决方案是将HTML和JS设置为通用化，以便单个事件处理程序可以用于该HTML结构的所有实例。

为此，您可以使用class属性对HTML元素进行分组，并在jQuery中选择它们。像这样：

$(function() {
  $('.open').click(function() {
    $(this).next('.box').show();
  });
});

.box { display: none; }

@foreach (var item in Model)
{
  @Html.TextBoxFor(model => item.Name)
  @Html.ValidationMessageFor(model => item.Name)

  <button type="button" class="btn btn-default open">Open</button>
  <div class="box">
    Hi @Html.TextBoxFor(model => item.Name)
  </div>
}

请注意，您正在使用可编辑的文本框来设置问候语;大概应该是Hi @item.Name

如何在for循环中复制JavaScript

1 个答案: