如何为每个可折叠元素为某个类分配不同的ID，并将该ID添加到按钮的href以便它们可以切换？(How can I assign a different ID for each collapsible

如何为每个可折叠元素为某个类分配不同的ID，并将该ID添加到按钮的href以便它们可以切换？(How can I assign a different ID for each collapsible element with a certain class and add that ID to the href of the buttons so they can toggle?)

一个冗长的问题 - 我基本上使用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的片段，但到目前为止还没有任何工作。

以下是它的工作原理： 截图

Bit of a long winded question - I'm basically using the toggle function from Bootstrap to show and hide a text box when clicking a button. My issue is, the text box and button is used for each item in a list which is dynamically loaded so I can't assign IDs via HTML as usual.

How can I generate a different ID for each text box and add that ID to each text box's button's href tag?

Here's my code of the text box and button (which sits inside an li tag along with some other information which gets generated for each item in the list):

<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>

I've played about with some snippets of jquery, but nothing's quite worked so far.

Here's how it should look when it works: Screenshot

最满意答案

您实际上不需要为文本框分配随机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(); }); });

这是一个工作样本

You do not really need to assign a random id to the textbox to handle this. You may use relative jQuery selectors to gt access to the textarea which belongs in the same parent container.

Looks like you have hard coded the Id value of the container div. When you run your code, your loop will produce multiple div's with same Id value.You cannot have same Id for more than one element. So remove the Id of the outer div and give a css class which we will use for our jQuery selector later.

<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>

Now in your javascript listen to the click event on the link, use the closest() method to get to the outer container div then use find() method to get access to the text area.

$(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 }); });

Thanks to jQuery chaining. We can use a one liner to replace all three lines.

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

Here is a working sample