Question

我有疑问，因为我的网站上的JS代码有问题。我在Js文件中创建了7个弹出窗口，并将该文件附加到我的index.php。当我使用所有这些时，只有最后一个工作

index.php（片段）

                            <div id="popupBox_1">
                            <div class="popupBoxWrapper">
                                <div class="popupBoxContent">
                                    <h3>Popup 1</h3>
                                    <p>Obecnie przeglądasz okienko 1</p>
                                </div>
                            </div>
                        </div>

                        <div id="popupBox_2">
                            <div class="popupBoxWrapper">
                                <div class="popupBoxContent">
                                    <h3>Popup 2</h3>
                                    <p>Obecnie przeglądasz okienko 2</p>
                                </div>
                            </div>
                        </div>

                        <div id="popupBox_3">
                            <div class="popupBoxWrapper">
                                <div class="popupBoxContent">
                                    <h3>Popup 3</h3>
                                    <p>Obecnie przeglądasz okienko 3</p>
                                </div>
                            </div>
                        </div>

popup.js（片段）

    window.onclick = function(event) {
        if (event.target == popupBox_1) {
            popupBox_1.style.display = "none";
        }
     }

     window.onclick = function(event) {
         if (event.target == popupBox_2) {
             popupBox_2.style.display = "none";
         }
     }

     window.onclick = function(event) {
        if (event.target == popupBox_3) {
            popupBox_3.style.display = "none";
        }
    }

我制作了这些弹出窗口并且它们正常工作但是我在js中创建了这些函数，因为我想在用户点击外部弹出窗口时关闭它们。它只适用于我定义的最后一个（我的意思是popupBox_3），我想让它们全部工作!!!

请我帮忙！

Answer 1

您无法使用Node.onclick分配多个点击事件处理程序，每次执行此操作时都会覆盖最后一个。你可以切换到

window.addEventListener('click', function() {
   if (event.target == popupBox_1) {
        popupBox_1.style.display = "none";
    }
});

window.addEventListener('click', function() {
   if (event.target == popupBox_2) {
        popupBox_2.style.display = "none";
    }
});

...etc.

但是将所有三个条件移动到一个单击处理程序中会更有意义：

window.onclick = function(event) {
    if (event.target == popupBox_1) {
        popupBox_1.style.display = "none";
    }
    if (event.target == popupBox_2) {
         popupBox_2.style.display = "none";
    }
    if (event.target == popupBox_3) {
        popupBox_3.style.display = "none";
    }
}

当用户在JavaScript中点击外部时，可以使弹出窗口关闭

1 个答案: