模式不会在所有按钮上打开

Question

正如我的标题所述，我遇到了一个问题，即模式无法在所有按钮上打开。

情况如下：

我有一个页面显示用户针对不同工作发送的所有申请。所以它可能只是一个，也可能是任何一个。它看起来像这样：

现在，如果用户想要取消应用程序，他可以按下“Bewerbung zurückziehen”按钮，然后打开模态提示所有数据都将丢失，如果他确定，他可以在模态中确认或返回。对于站点上的第一个 post，一切正常，但对于所有其他 post，什么都没有发生，因此模式无法打开。

这是我的代码：

显示所有post的blade文件：

@foreach($bewerbungen as $bewerbung)
                    @foreach($stellenanzeigen_names as $stellenanzeigen_name)
                        @if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
                            <div
                                class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
                                <!--Card 1-->
                                    <div
                                        class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
                                        <div class="pt-4 pl-4">
                                            {{ $stellenanzeigen_name->Titel }}
                                            <hr class="border-black">
                                        </div>
                                        <div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
                                            ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}</div>
                                        <div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
                                            ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}</div>

                                        <div class="w-1/4 mb-4 pl-4">
                                            <div class="font-medium text-base font-bold font-serif mb-4 pb-3">
                                                <button type="submit" id="delete_appl_btn" name="delete_appl_btn"
                                                        class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
                                                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
                                                                shadow-2xl border-2 w-full p-4 rounded-lg">
                                                    Bewerbung zurückziehen
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        @endif
                    @endforeach
                @endforeach

模态代码如下：

<div id="delete_application_modal" class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
                        <div class="mt-3 text-center text-xl">
                            Bewerbung zurückziehen
                            <div class="text-center text-sm mt-4">
                               
                            </div>
                        </div>

                        <div class="items-center px-4 py-3">
                            <label for="delete_application" class="sr-only">Bewerbung zurückziehen</label>

                            <form action="{{ route('delete', $bewerbung->Bewerbung_ID) }}" method="post">
                                @csrf
                                <button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
                                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
                                                shadow-2xl border-2 w-full p-4 rounded-lg">
                                    Bewerbung zurückziehen
                                </button>
                            </form>
                        </div>

                        <div class="items-center px-4 py-3">
                            <button id="back_btn_tel" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
                                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
                                                shadow-2xl border-2 w-full p-4 rounded-lg">
                                zurück
                            </button>
                        </div>
                    </div>
                    @if(session()->has('message'))
                        <div class="alert alert-success">
                            {{ session()->get('message') }}
                        </div>
                    @endif
                    <script>
                        var delete_appl_modal = document.getElementById("delete_application_modal");

                        var open_modal = document.getElementById("delete_appl_btn");

                        var back_btn = document.getElementById("back_btn_tel");

                        open_modal.onclick = function () {
                            delete_appl_modal.style.display = "block";
                        }

                        back_btn.onclick = function () {
                            delete_appl_modal.style.display = "none";
                        }

                        window.onclick = function (event) {
                            if (event.target == modal) {
                                delete_appl_modal.style.display = "none";
                            }
                        }
                    </script>

老实说，我不知道为什么它对第一个有效但对其他无效，它们具有相同的按钮，具有相同的名称、ID 和所有内容。也许你们中的一个人有类似的问题。祝大家节日快乐！

编辑：打开模式的新代码：

    <script>
var delete_appl_modal = document.querySelector('#cancel_appl_modal');
    
    
var open = document.querySelector('#open_btn');
    
var back_btn = document.querySelector('#back_btn_tel');
    
open.onclick = function () {
                                                delete_appl_modal.style.display = "block";
                                            }
    
back_btn.onclick = function () {
                                                delete_appl_modal.style.display = "none";
                                            }

window.onclick = function (event) {
if (event.target == modal) {
                                                    delete_appl_modal.style.display = "none";
                                                }
                                            }
                                        </script>

当我使用 querySelectorALl 时，第一个也不再起作用了

Answer 1

id property is expected to be unique within a page, so when using getElementById 一旦找到具有 id 的元素，它就不会继续搜索其他元素。

由于您有多个要定位的 button 元素，因此您需要我们使用 querySelectorAll or getElementsByClassName 之类的东西来定位应触发模式打开的每个元素。

一个让你走上正确方向的例子。

<button class="open-modal">Button A</button>
<button class="open-modal">Button B</button>
<button class="open-modal">Button C</button>

let buttons = document.querySelectorAll('.open-modal');

buttons.forEach(button => {
    button.addEventListener('click', function (event) {
    // this is where you would open the modal
    // delete_appl_modal.style.display = 'block';
    console.log(event.target.innerHTML);
  })
});

Example JSFiddle

模式不会在所有按钮上打开

Modal doesn't open on all buttons

javascript

bootstrap-modal