Jquery - 開く.next

Question

私は、.video-overlayという名前の次のdivだけを開くスクリプトを作成しようとしています。 IDを使用したくないのは、1ページに最大30個の動画がある可能性があるからです。

JSフィドル：スクリプトが...両方の影響を与えている瞬間https://jsfiddle.net/w2fqrzbw/

は.videoオーバーレイという名前の次のdivを標的にする方法はありますか？

HTML：

<span class="video-trigger">Button 1 </span> 
<!-- Close video trigger--> 

<div class="video-overlay"> 
    <div class="overlay-close">Close</div> 
    <div class="container"> 
     Popup 1 
    </div> 
</div> 
<!-- Close video popup--> 


<br><br/> 
<br><br/> 
<br><br/> 



<span class="video-trigger">Button 2</span> 
<!-- Close video trigger--> 

<div class="video-overlay"> 
    <div class="overlay-close">Close</div> 
    <div class="container"> 
     Popup 2 
    </div> 
</div> 
<!-- Close video popup--> 

JS：

//Video popup 
    $(document).ready(function() { 
     $('.video-trigger').click(function() { 
      $('.video-overlay').fadeIn(300); 
      $('.video-overlay video').get(0).play(); 

     }); 
     $('.video-overlay .overlay-close').click(function() { 
      $('.video-overlay').fadeOut(300); 
      $('.video-overlay video').get(0).pause(); 
     }); 
    }); 

これは、それが私の実際のウェブ文書にレイアウトされている方法です。

<div class="col span_6_of_12 ripple-me"> 
          <div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);"> 
           <span class="video-trigger"> 
           </span> 
          </div> 
          <!--Close Video box cta --> 

          <div class="video-overlay"> 
           <div class="overlay-close">Close</div> 
           <div class="container"> 
            <iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe> 
           </div> 
          </div> 
          <!-- Close video popup--> 

         </div> 

Answer 1

あなたの現在のロジックの問題があることですクリックするとすべての.video-overlay要素に影響しています。これを修正するには、DOM traversalを使用して、クリックされた.video-triggerに関連するものだけを見つけて、next()とclosest()を使用することができます。 JQuery Next Functionを使用してみてください

$(document).ready(function() { 
    $('.video-trigger').click(function() { 
    $(this).next('.video-overlay').fadeIn(300).find('video').get(0).play(); 
    }); 

    $('.video-overlay .overlay-close').click(function() { 
    $(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause(); 
    }); 
}); 

Answer 2

：

//Video popup 
$(document).ready(function() { 
    $('.video-trigger').click(function() { 
     var $videoOverlay = $(this).next('.video-overlay'); 
     videoOverlay.fadeIn(300); 
     videoOverlay.find('video').get(0).play(); 

    }); 
}); 

Answer 3

jQueryの強力なDOMのトラバーサルのツールを提供し、これを試してみてください。

//Video popup 
$(document).ready(function() { 
    $('.video-trigger').click(function() { 
    $(this).parent().next('.video-overlay').fadeIn(300); 
    $('.video-overlay video').get(0).play(); 

    }); 
    $('.video-overlay .overlay-close').click(function() { 
    $(this).parent().fadeOut(300); 
    $('.video-overlay video').get(0).pause(); 
    }); 
});