jqueryが複数の要素をトリガーするのを避けるためのループ

Question

jqueryとcssでモーダルウィンドウを作成しようとしています。リスト要素をクリックするとアクティブになります。 私が達成したいエフェクトは、別のdiv blurryエフェクトの途中でポップアップdivですが、各リスト要素に対して1つのdivしか表示しません！ （私は要素を表示するために表示なしを使用しているので、2つのリスト要素をクリックすると、すべてのボックスが互いに近くに表示され、得られる効果は非常に醜いものになります）。 LISTE要素： はここに私のコードです

<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> 

ジャバスクリプト（私は.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()：これは、指定されたインデックスにある要素のセットを減らします。だから、インデックスに基づいてこのような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"); 
  }); 
  

  上記のコードをします：あなたは1 liとdivで仕事をしたいとあなたはイベントハンドラは次のようになります

時点で、このため .each()を使用していない

モーダルdivが現在開かれているかどうかを検出します。その場合は、クリックしたときにクリックするだけで、いずれかのliがクリックされます。モーダルdivが開いていない場合は、liをクリックすると、対応するモーダルdivが開きます。

あなたは本当のモーダル動作を実装するためにまだやることがありますが、私は上記の1つだけdivを表示することについてのあなたの質問に答えると思います。