我如何使用 jquery 创建动态下拉表单

Question

我正在开发一个 Django 项目，我正在尝试在单击按钮时实现一个下拉表单。单击按钮时我有一个下拉表单，并且每个表单都有自己的按钮，问题是当我单击特定表单按钮时，所有其他表单下拉列表也是如此。我只希望特定的表格下拉，而其他表格则不需要。我认为这与将表单的 id 传递给每个单击的按钮有关。这是我试过的。

模板：

{% for comment in all_comments %}
<ul>
<li class="float-right">
<!--Dropdown-->
<div class="dropdown dropdown-commentdeleteedit">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h grey-text"></i>
</a>
<!-- Menu -->
<div class="dropdown-menu font-small z-depth-1">
<a class="dropdown-item material-tooltip-email editform-dropdown" data-toggle="tooltip" data-placement="top" title="Edit">
<img src="{{ '/static/' }}images/edit24px.png" width="18" height="18"></a>
</div>
</div>
<!--Dropdown-->
</li>
{% endif %}
<h6 class="comment editcomment-text ml-5">
{{ comment.comment_post }}
</h6>

<!-- DROPDOWN EDIT COMMENT FORM -->
<form  method="POST" enctype="multipart/form-data" class="ajaxcomment-editform editcommentform editcomment-form mb-4" id="" action="{% url 'site:comment_update' post.id comment.id %}">
{% csrf_token %}
<textarea name="comment_post" cols="20" rows="5" required="" id="id_comment_post{{ comment.id }}">{{ comment.comment_post }}</textarea>
<button type="submit" class="btn btn-sm waves-effect z-depth-1">Save</button>
</form>
</ul>
{% endfor %}

Jquery:

<script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(){
 $('.editcommentform').show();
 $('.editcomment-text').hide();
})
</script>

Answer 1

它正在打开所有下拉菜单，因为 $('.editcommentform') 使用 class editcommentform 选择了 DOM 中的所有元素。范围太广了。

您需要向处理函数添加事件参数，然后在函数中引用event.target 以访问被单击的实际对象。然后您可以访问要显示和隐藏的确切 .editcommentform 和 .editcomment-text 元素。

像这样的东西应该可以工作：

<script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(event){
  $(event.target).closest('li').find('.editcommentform').show();
  $(event.target).closest('li').find('.editcomment-text').hide();
})
</script>

调用 $(event.target).closest('li') 会选择最接近被单击对象的父 li 元素，然后调用 find('classname') 选择具有 class editcommentform 的父元素的子元素。

这是一个基于您的代码的 fiddle，显示了它是如何工作的：https://jsfiddle.net/BenjaminRay/kfbvo6zL/

我如何使用 jquery 创建动态下拉表单

How can i create a dynamic dropdown form using jquery

html

django

jquery

dropdown