Jquery - 打开.next

Question

我正在尝试创建一个脚本，只打开下一个名为.video-overlay的div。我不想使用ID，因为每页最多可以有30个视频。

JS小提琴：https://jsfiddle.net/w2fqrzbw/

目前剧本正在影响两个......有没有办法瞄准下一个div裸.video-overlay？

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遍历来仅使用.video-trigger和next()查找与单击的closest()相关的那个。试试这个：

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

尝试使用JQuery Next Function：

//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();
  });
});