我试图在单击不同的div时实现不同的弹出窗口。下面是一个示例:

<div class="column" onclick="togglePopup('popup', 2)">Residential cleaning</div> <!--Function used here. -->
                        <div id="overlay">
                            <div class="popup">
                                <div class="popup_content">
                                    <div class="close_btn" onclick="closePopup('popup',2)">&times;</div>
                                    <h1>Some heading</h1>
                                    <p>SOME TEXT</p>
                                    <img src="assets/some_image.jpg" alt="image" width="249">
                                </div>
                            </div> <!--END of the popup window -->
                        </div>

当我单击类的div列时，我应该会看到弹出的div，但它只适用于第一个div。下面是JavaScript:

<div class="column" onclick="togglePopup('popup', 2)">Residential cleaning</div> <!--Function used here. -->
                        <div id="overlay">
                            <div class="popup">
                                <div class="popup_content">
                                    <div class="close_btn" onclick="closePopup('popup',2)">&times;</div>
                                    <h1>Some heading</h1>
                                    <p>SOME TEXT</p>
                                    <img src="assets/some_image.jpg" alt="image" width="249">
                                </div>
                            </div> <!--END of the popup window -->
                        </div>

函数将类弹出窗口的所有divs保存在let all_divs中，然后使用参数div_num选择特定的div，最后切换类“active”（CSS将在下面）。但就像我说的，它只起作用一次。顺便说一下，id覆盖最初是隐藏的。 CSS:

<div class="column" onclick="togglePopup('popup', 2)">Residential cleaning</div> <!--Function used here. -->
                        <div id="overlay">
                            <div class="popup">
                                <div class="popup_content">
                                    <div class="close_btn" onclick="closePopup('popup',2)">&times;</div>
                                    <h1>Some heading</h1>
                                    <p>SOME TEXT</p>
                                    <img src="assets/some_image.jpg" alt="image" width="249">
                                </div>
                            </div> <!--END of the popup window -->
                        </div>

我真的不知道为什么会发生这种情况，它只使用列表的第一个元素“all_divs”。有办法解决这个问题吗？我已经尝试了很多东西，并意识到它只适用于列表的第一个元素。我没有在代码中包含第一个div，因为它是完全一样的，除了在onclick=“togglepopup('popup',1）”中有一个2.

顺晟科技：

您试图通过不存在的索引访问htmlcollection。例如

<div class="column" onclick="togglePopup('popup', 2)">Residential cleaning</div> <!--Function used here. -->
                        <div id="overlay">
                            <div class="popup">
                                <div class="popup_content">
                                    <div class="close_btn" onclick="closePopup('popup',2)">&times;</div>
                                    <h1>Some heading</h1>
                                    <p>SOME TEXT</p>
                                    <img src="assets/some_image.jpg" alt="image" width="249">
                                </div>
                            </div> <!--END of the popup window -->
                        </div>

相反，您应该向打开按钮添加数据，以通过其唯一ID显式地描述它应该打开哪个弹出窗口。

此外，您还应该:

• 使用to到每个相关按钮
• 使用html按钮而不是div