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

我想建立一个模式窗口与jQuery和CSS将被激活单击列表元素。我想实现的效果是另一个div模糊效果中的弹出div，但对于每个列表元素，我只想显示一个div！（我在元素上使用display none来显示，所以如果我点击两个list元素，每个box都会显示在对方附近，并且获得的效果会非常难看）。这里是我的代码：清单当然元素：For循环与jquery避免触发多个元素

<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（我想用一个。每个函数，但我不知道如何连接每个列表每格）：

$("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%; 
}

任何建议？

来源

2016-06-21 Marco Maffei

我的建议是不使用'nnth-child'，而是使用每个'li'和'div'共享的显式类。换句话说，第一个'li'可能有一个“modal-1”类，其相应的'div'将具有相同的类。 –

为什么孩子编号有变化：当你点击第一个'li'时，你想使用第二个模态'div'？为什么不是第一个？ – trincot

这是因为dom：这部分的DOM是建立在两个容器中，一个是侧边栏（＃page-wrap），另一个是两个主要div的容器，带有文本和div的盒子将被解雇模糊效果。在第二部分中，第一个孩子是包含背景图像的实际div，因此在列表元素和另一侧的div之间存在移位 –

为了确保只有一个div是在同一时间可见，并使用一个事件处理程序，所有li，你可以利用：

.index()：这给出了一个整数，指示元素的位置相对于其兄弟元素。如果您将其应用于this，您可以知道被点击的li的编号。
.eq()：这将一组元素减少到指定索引处的元素。所以你可以根据索引“挑选”这样的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。

来源

2016-06-21 20:12:34 trincot

谢谢Trincot t！它完美的工作！ –

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

回答

相关问题