jquery 的 For 循环避免触发多个元素

Question

我正在尝试使用 jquery 和 css 构建模态 window，单击列表元素即可激活。我想要实现的效果是在另一个 div 模糊效果中间弹出一个 div，但是对于每个列表元素我只想显示一个 div!! （我在要显示的元素上使用了 display none，所以如果我单击两个列表元素，每个框将彼此靠近显示，获得的效果将非常难看）。这是我的代码：列表元素：

<div class="blabla" id="page-wrap">
                <ul class="nav nav-sidebar">
                    <li></li><li></li><li></li>....
                </ul>
            </div>

模态div:

<div class="main">
                <div class="before-background"></div>
                <div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
<div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
<div class="modal">
                    <h1>Some Text</h1>
                    <p>Some other text</p>
                </div>
</div>

javascript（我想使用 .each 函数，但我不知道如何将每个列表与每个 div 连接起来）：

$("li:nth-child(1)").on("click", function() {
            $(".before-background").toggleClass("dialogIsOpen");
            $(".main .modal:nth-child(2)").toggleClass("modalEffect");
        });
        $("li:nth-child(2)").on("click", function() {
            $(".before-background").toggleClass("dialogIsOpen");
            $(".main .modal:nth-child(3)").toggleClass("modalEffect");
        });

..等等..

最后 css:

.modal {
    position: relative;
    float: left;
    background: #8dc63f;
    color: white;
    width: 50%;
    left: 22%;
    top: -90%;
    display: none;
    padding: 2%;
    text-align: center;
}
.dialogIsOpen {
    -webkit-filter: blur(5px) grayscale(50%);
    /*-webkit-transform: scale(0.9);*/
}
.modalEffect {
    display: block!important;
    pointer-events: auto!important;
}
.before-background, .modal {
    transition: all 0.9s ease;
}
.main {
    margin-left: 0;
    height: 443px;
    width: 94.333333%;
    padding: 0;
}
.before-background {
    background-image: url(images/effect-image.jpg);
    width: 100%;
    height:100%;
}

有什么建议吗？？

Answer 1

要确保一次只有一个 div 可见，并为所有 li 使用一个事件处理程序，您可以使用：

.index()：给出一个整数，指示元素相对于其兄弟元素的位置。如果你将它应用到 this 你可以知道被点击的 li 的数量。
.eq()：这会将一组元素缩减为指定索引处的元素。所以你可以 "pick" 一个 div 像这样基于一个索引。
您不为此使用 .each()，因为您希望一次使用一个 li 和 div

事件处理程序可能如下所示：

$("li").on("click", function() {
    var index = $(".dialogIsOpen").length 
            ? $(".main .modalEffect").index() - 1 // number of visible `div` 
            : $(this).index(); // number of clicked `li` element
    $(".main .modal").eq(index).toggleClass("modalEffect");
    $(".before-background").toggleClass("dialogIsOpen");
});

以上代码将检测当前打开模式 div 的时间，如果是，则点击将关闭该模式，无论点击哪个 li。当没有打开模态 div 时，点击一个 li 会打开对应的模态 div.

您仍然需要做一些事情来实现真正的模态行为，但我认为以上内容回答了您关于仅显示一个 div.

的问题

jquery 的 For 循环避免触发多个元素

For loop with jquery avoiding to trigger more than one element

each

jquery

hook

loops