Question

因此，我尝试在单击图标时创建一个编辑表单，到目前为止，一切正常，但是当单击一个图标（编辑图标）时，单击了其他图标，这又显示了所有表单。我正在通过烧瓶将数据传递到我的html文件中。

<!-- Form Elements -->
              <div class="col-lg-12 mb-5" >
                <div class="card">
                  <div class="card-header text-center">
                    <h3 class="h6 text-uppercase mb-0"> TESTING</h3>
                  </div>
                  <div class="card-body">
                    <h5 class="h6 mb-0">
                      {% block content %}
                        {% for complaint in value['result'] %}
                          <article class="post">
                            <header>
                                <!-- Delete icon -->
                                <div class="text-right">
                                    <a href="{{ url_for('delete', _id=complaint.id) }}">
                                        <ion-icon style="color:blue"; name="trash-sharp"></ion-icon>

                                    </a>
                                </div>

这就是一切发生的地方。

                                <!-- Edit icon -->
                                <div class="text-center">
                                    <button class="py" type="button">
                                        <ion-icon size="large" name="create"></ion-icon>
                                    </button>
                                </div>
                                <form style="display:none"; method="POST" class="p-3" id="py1">
                                    <div class="form-group">
                                        <label for="title">Title</label>
                                        <input type="text" class="form-control rounded-lg" id="title" placeholder="Joe Smith">
                                    </div>
                                    <div class="form-group">
                                        <label for="message">Message</label>
                                        <textarea class="form-control rounded-lg" placeholder="Enter your message" required></textarea>
                                    </div>
                                    <div class="form-group">       
                                        <input type="submit" value="Update" class="btn btn-primary">
                                    </div>
                                </form>

您可以看到数据传递到的地方。

这是我的jQuery文件，有点粗糙。我已经尝试了一些循环，从循环到绑定（我知道它已被弃用），这只是行不通。

//    $("button.py").each(function(){
//        $(this).bind('click', function(){
//            $("form.p-3").each(function(){
//                $(this).toggle();
//            });
//        });
//    });
//});

$(document).ready(function() {
    $("button.py").on("click each", "form.p-3", function(){
        $(this).toggle();
    });
});

我也在显示评论，以便您可以看到我所做的大部分事情。我是Web编程的新手，也会在堆栈溢出时提出问题。同样在最后期限。图片：https://ibb.co/0Vq8jtp

编辑：按钮和表单是动态创建的

Answer 1

如果您有多个表单，请将表单类名称保留为不同的名称。

以下代码有效！请尝试一下。

HTML代码

<div class="text-center">
    <button class="py" type="button">
        <ion-icon size="large" name="create"></ion-icon>
    </button>
</div>
<form style="display:none" ; method="POST" class="p-3" id="py1">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control rounded-lg" id="title" placeholder="Joe Smith">
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control rounded-lg" placeholder="Enter your message" required></textarea>
    </div>
    <div class="form-group">
        <input type="submit" value="Update" class="btn btn-primary">
    </div>
    
</form>

jQuery代码

<script>

    $(document).ready(function () {
        $("button.py").click(function () {
            console.log("button is clicked");
            $("form.p-3").toggle('');
        });
    });
</script>

Answer 2

由于我们要遍历投诉，因此需要一个唯一的标识符来关联每个按钮和表单对

 <!-- Edit icon -->
 <div class="text-center">
   <button class="py" type="button" data-id="{{ complaint.id }}" data-select="form-button">
     <ion-icon size="large" name="create"></ion-icon>
   </button>
 </div>

<form data-id="{{ complaint.id }}" data-select="form" style="display:none"; method="POST" class="p-3" id="py1">
    <!-- form elements ... ... ... -->
</form>

我正在使用data属性进行查询选择，甚至可以使用class

jQuery代码

<script>
  $(document).ready(function () {
  $('button[data-select="form-button"]').each(function () {
    let buttonId = $(this).data('id')
    $(this).bind('click', function () {
      $(`form[data-select="form"][data-id="${buttonId}"]`).toggle();
    });
  });
});
</script>

防止在单击一个按钮时多次单击按钮

2 个答案: