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

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

我还展示了 cmets，以便您可以看到我所做的大部分工作。 我对网络编程还很陌生，还询问有关堆栈溢出的问题。 也是截止日期。 图片：https://ibb.co/0Vq8jtp

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

Answer 1

由于我们循环处理投诉，我们需要一个唯一标识符来关联每个按钮和表单对

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

我正在使用数据属性进行查询选择，您甚至可以使用类

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>

Answer 2

如果您有多个表单，请保持表单类名称不同。

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

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>