仅针对第一个 for 循环元素的模式打开？

Posted 2023-03-07

【中文标题】仅针对第一个 for 循环元素的模式打开？

【英文标题】：modal opening only for the first for loop element?

【发布时间】：2021-10-25 07:59:28

【问题描述】：

我在 Django 中有我的 for 循环，例如它只打开第一个元素的模式，而其他元素没有任何反应。

这是我的 html 文件，它使用删除按钮显示表格中的所有元素。单击删除按钮时，会打开一个模式，但它仅针对第一个元素打开，我应该对此进行哪些更改？

 <table>
                % for card in cards %
                <tr class="record">
                  <td>card.number</td>
                  <td>
                    <button
                      class="hover:bg-gray-500 duration-500"
                      id="delete-btn"
                    >
                
                    </button>
  <div
                      class="
                        fixed
                        flex
                        justify-center
                        items-center
                        hidden
                      "
                      aria-labelledby="modal-title"
                      aria-modal="true"
                      id="overlay"
                    >
                   ............. #some lines of code
                          <div
                            class="
                              bg-gray-50
                              px-4
                              py-3
                              sm:px-6 sm:flex sm:flex-row-reverse
                            "
                          >
                            <a
                              href="% url 'p:delete-card' card.id %"
                              id="delbutton"
                            >
                              <button
                                type="button"
                                class="
                                  w-full
                                  inline-flex
                                  justify-center
                                
                                "
                              >
                                Delete
                              </button>
                            </a>
                          </div>
                        </div>
                      </div>
                  </td>
                </tr>
                % endfor %

我的 js 在按钮点击时打开模式

      window.addEventListener('DOMContentLoaded',() =>
           const overlay = document.querySelector('#overlay')
           const delbtn = document.querySelector('#delete-btn')

           const toggleModal = () => 
               overlay.classList.toggle('hidden')
               overlay.classList.add('flex')
           

             delbtn.addEventListener('click',toggleModal)
   
                 )

【问题讨论】：

也许使用类而不是 id 作为删除按钮... id 应该是唯一的（在 dom 中只有一次）。

【参考方案1】：

我在Data in Django for loop % for % not loading for Modal的帮助下这样解决了

我像这样更改了所有按钮的 id 并添加了删除按钮类！

 <button class="hover:bg-gray-500 duration-500 delete-button" id="delete-btn_card.id">
 </button>

也喜欢这个在叠加层中添加的 card.id。

我的 Jquery：

  $(".delete-button").click(function() 
             var id = $(this).attr("id").split("_")[1]
               $(`#overlay_$id`).show();
                 );

【讨论】：

这就是我建议的 class 而不是 id。 ;) 我想更准确地回答，但不幸的是我还没有时间。