Question

一个冗长的问题 - 我基本上使用Bootstrap的切换功能来显示和隐藏单击按钮时的文本框。我的问题是，文本框和按钮用于动态加载的列表中的每个项目，因此我不能像往常一样通过HTML分配ID。

如何为每个文本框生成不同的ID，并将该ID添加到每个文本框的按钮的href标记中？

这是我的文本框和按钮的代码（位于li标签内，以及为列表中的每个项目生成的其他信息）：

<div id="comment-container">
    <a data-toggle="collapse" href="" aria-expanded="false" aria-controls="add-comment" class="btn btn-primary add-comment"><i class="fa fa-plus-circle"></i><span>Add Comment</span></a>
    @Html.TextAreaFor(x => Model.CurrentStage.Responses[i].Comment, new { @class = "form-control comment collapse", rows = 3, placeholder = "Enter a comment to accompany your response here:" })
</div>

我已经玩了一些jquery片段，但到目前为止还没有什么工作。

以下是它的工作原理： Screenshot

Answer 1

您实际上不需要为文本框分配随机ID来处理此问题。您可以使用相对jQuery选择器来访问属于同一父容器的textarea。

看起来你已经硬编码了容器div的Id值。当您运行代码时，您的循环将生成具有相同Id值的多个div。对于多个元素，您不能具有相同的Id。所以删除外部div的Id并给出一个css类，稍后我们将使用它们为jQuery选择器。

<div class="comment-item-container">
    <a data-toggle="collapse" href="#" aria-expanded="false" aria-controls="add-comment" 
        class="btn btn-primary add-comment"><i class="fa fa-plus-circle"></i>
                                                        <span>Add Comment</span></a>
    @Html.TextAreaFor(x => Model.CurrentStage.Responses[i].Comment, 
      new { @class = "form-control comment collapse", rows = 3,
                       placeholder = "Enter a comment to accompany your response here:" })
</div>

现在在你的javascript中听取链接上的click事件，使用closest()方法转到外部容器div，然后使用find()方法访问文本区域。

$(function(){

  $("a.add-comment").click(function(e){
    e.preventDefault();

      var outerDiv = $(this).closest(".comment-item-container");  //get outer div

      var txtArea = outerDiv.find("textarea");   // find the textarea(s) in the outer div

      txtArea.toggle();  //change visibility of the result textareas
  });

});

感谢jQuery链接。我们可以用一个衬垫代替所有三条线。

$(function(){

  $("a.add-comment").click(function(e){
    e.preventDefault();
      $(this).closest(".comment-item-container").find("textarea").toggle();
  });

});

Here是一个工作样本

如何为每个具有特定类的可折叠元素分配不同的ID，并将该ID添加到按钮的href以便它们可以切换？

1 个答案: