具有不同弹出窗口的 Javascript 多次点击事件

Question

嗨，我该如何以最好/最聪明的方式做到这一点？我试图在单击列表项之一时弹出一个窗口，然后应该弹出具有匹配内容编号的 div。

<ul id="parent">
    <li class="options">Content 01</li>
    <li class="options">Content 02</li>
    <li class="options">Content 03</li>
    <li class="options">Content 04</li>
</ul>


<div class="popUp">
     <h2>Content 01</h2>
     <p>Somete random text</p>
</div>
<div class="popUp">
     <h2>Content 02</h2>
     <p>Some random text</p>
</div>
<div class="popUp">
     <h2>Content 03</h2>
     <p>Some random text</p>
</div>
<div class="popUp">
    <h2>Content 04</h2>
    <p>Some random text</p>
</div>

Javascript

我可以在每个 li 元素上创建一个点击事件，但是如何将它与不同的 div 连接起来？

<script>
    parent = document.querySelectior("#parent");
    parent.addEventListener("click", function(e){
    let options = e.document.querySelectorAll(".options");
    options.forEach(function (c) {
        c.addEventListener("click", function(){
        //Open the differen divs????
        }, false);
    });
}, false);

</script>

Answer 1

最通用的解决方案是将选择器字符串作为 data-* 属性添加到标识要使用的 div 的 li 中，然后使用该字符串。

<li data-div="#div1">...</li>

(将 id="div1" 添加到相关 div - 或使用唯一标识相关 div 的任何有效 CSS 选择器)，然后:

options.forEach(function (c) {
    c.addEventListener("click", function(){
        var div = document.querySelector(this.getAttribute("data-div")); // ***
        // Use `div` here...
    }, false);
});

或者，如果文档中索引可靠，您也可以通过索引将它们关联起来:

options.forEach(function(c, index) {                    // ***
    c.addEventListener("click", function(){
        var divs = document.querySelectorAll(".popUp"); // ***
        if (index < divs.length) {                      // ***
            var div = divs[index];                      // ***
            // Use div here
        }
    }, false);
});

在这两种情况下，“在此处使用 div”是您使该 div“弹出”的地方，无论您的意思是“弹出”。