是否可以在单击按钮时多次显示隐藏的 div？ [关闭]答案

【问题标题】：Is it possible to show a hidden div as many time as i click a button? [closed]是否可以在单击按钮时多次显示隐藏的 div？ [关闭]
【发布时间】：2018-08-09 08:11:16
【问题描述】：

这是我隐藏的 div。

<div id="showInstituteOne" style="display:none">
      <h3>Institutes</h3>
      <div class="form-group">
          <label class="col-sm-3 control-label">Institute</label>
          <div class="col-sm-9">
               @Html.TextBoxFor(m => m.StudentInstitutes[1].Name, new { @class = "form-control student-institute", @id = "studentInstitute" })
          </div>
     </div>
</div>

这是我的按钮

<div class="form-group">
    <div class="col-sm-6">
        <input type="button" value="Add More Institution" onclick="showDiv()"  />
   </div>
</div>

这是JS函数

var countClick = 0;
    function showDiv() {
        document.getElementById('showInstituteOne').style.display = "block";
        countClick++;
     }

我想在点击按钮时显示 div。计数单击以更新输入字段的 id 号。

【问题讨论】：

您的问题在哪里？你的代码不行吗？
要重复 div 吗？因为无论你多久让它可见，可见都是可见的。
我的代码运行良好。当我第一次单击该按钮时，它会显示隐藏的 div，但我想要的是第二次重复该 div，因为我第二次单击该按钮。
@Fahad 一种方法是在每次点击事件时将所需的 html 附加到 div 元素。我在您的代码中看到了剃刀语法，您使用的是 mvc 还是 Web 表单？如果是 mvc，你可以在每次点击时渲染部分视图。
我正在使用 mvc。 @YouKnowMe

标签： javascript asp.net

【解决方案1】：

把你的js改成这个

var countClick = 0;
    function showDiv() {
        var el = document.getElementById('showInstituteOne');
        el.style.display = "block";
           if (countClick > 0) {
              document.getElementById(>>parent id here<<).appendChild(el.cloneNode(true));
           }
        countClick++;
     }

【讨论】：

我认为这不会起作用，因为他在那个 div 中使用了 HtmlHelper。 YouKnowMe 在上面的评论中发布的链接应该可以解决问题。
它会起作用，因为当我们单击按钮时，HTML 已经呈现。所以我只是复制 HTML 并附加它
我尝试过 clone() 但在我的情况下，输入字段如下所示：- 所以它产生了一个复杂的 id 如何使用 countClick 更改 id 的索引号。
@Fahad，它应该是什么样子？这就是您使用 razor 生成的内容
@Leo 您只需将 html 复制到那里。但是 HtmlHelper 将文本框绑定到使值动态的模型。

【解决方案2】：

你的意思是显示其他隐藏的 div，除了你有它的 ID（在你的例子中 id="showInstituteOne" ）？

如果是这样，那么你不能在函数 showDiv 中使用相同的逻辑显示其他 div。

您可以将相同的类名添加到多个 div 并通过运行一个函数将它们全部显示。

像这样：

function showDiv() {
  var divs = document.getElementsByClassName('showInstitute');
  for(var i = 0; i < divs.length; i++){
      divs[i].style.display = "block";
  };
}

【讨论】：

不，我只有一个隐藏的 div。除此之外，如果我从父 div 克隆，每次单击按钮时如何更改 id 索引