单击链接时如何显示 div 以及如何从输入中获取值？

Question

我有一个使用 for 循环打印 cmets 的 django 模板，我想在单击编辑链接时显示输入字段和一个按钮，我该怎么做。 并且当按下编辑按钮时，我想从该特定输入字段中获取值。我该怎么做？

{% for comment in comments %}
<div class="comment mdl-color-text--grey-700">
   <header class="comment__header">
      <img src="images/co1.jpg" class="comment__avatar">
      <div class="comment__author">
         <strong>{{comment.User_name}}</strong>
         <span>{{comment.date}}</span>
      </div>
   </header>
   <div class="comment__text">
      {{comment.text}}
   </div>
   <!-- FAB button , class  "mdl-button--fab"-->
   <a href="javascript:delete_comment('{{comment.text}}','{{comment.blogslug}}')">
   <button class="mdl-button mdl-js-button mdl-button--fab">
   <i class="material-icons">delete</i>
   </button>
   </a>
    <!--when this link is clicked bellow edit_comment div should appear -->
   <a href="">
   <button class="mdl-button mdl-js-button mdl-button--fab">
   <i class="material-icons">edit</i>
   </button>
   </a>
    <!-- and also when i click the edit button how can i get value from the input -->
    <div id="edit_comment" style="visibility: hidden;">
        <input type="text" name="edit_comment">
        <button>edit</button>
    </div>
</div>
{% endfor %}

所以问题是这种类型的许多其他 cmets 因为它们是使用循环打印的。

Answer 1

首先，为什么要将按钮包装在<a> 标记中？不必要。

摆脱visibility: hidden。使用 display: none 或 Bootstrap 的 d-none 之类的类。

我建议d-none，因为它允许您添加和删除类，而不必担心继承的显示属性，即display: flex 或display: block。

https://getbootstrap.com/docs/4.0/utilities/display/

编写一个带有事件监听器的自定义函数。

在你的模板循环中：

<button class="mdl-button mdl-js-button mdl-button--fab" onclick="handleClick(this)">
   <i class="material-icons">edit</i>
</button>

假设您已删除 <a> 标签

JavaScript：

let handleClick = function(param) {
    let editCommentDiv = param.parentNode.lastChild;
    editCommentDiv.style.display = "none"
};

这绝不是最好的方法。我强烈建议您使用 BootStrap 的 d-none 类。此外，您实际上应该做的是基于 for 循环为按钮和 div 分配一个 ID，即id=editcommentdiv_{{ forloop.counter }} 这样您就不需要使用 DOM 导航到最后一个元素来获取编辑 div ，并且可以直接通过ID定位到div。