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避免觸發多個元素

回答

相關問題