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元素上创建一个click事件，但是如何将它与不同的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-*属性添加到标识要使用的li的{{1}}，然后使用该字符串。

div

（将<li data-div="#div1">...</li>添加到相关div中 - 或使用唯一标识相关div的任何有效CSS选择器），然后：

id="div1"

或者，如果在文档中可靠，则可以通过索引关联它们：

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

在这两种情况下，“在这里使用div”就是你让那个div“弹出”的地方，无论你的意思是“弹出”意味着什么。

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

1 个答案: