使用FancyBox和JW Player时的jQuery选择 [英] jQuery selection when using FancyBox and JW Player

问题描述

我可以使用以下简单方案: 单击页面上的div时，将通过FancyBox在叠加窗口中使用JW Player打开视频.这是一个简化的代码:

HTML:

<div>
    <a class="play_video" href="#" rel="/bin/video.mp4">Click to Watch Video</a>
</div>

jQuery:

$(document).ready(function() {
    $(".play_video").fancybox({
        content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
        afterShow: function()
            {
                var myVideo = $(".play_video").attr("rel");
                jwplayer("video_container").setup({
                    flashplayer: "/bin/player.swf",
                    file: myVideo,
                    width: 640,
                    height: 380,
                });
            }
    });
});

这是我的问题:如果我要显示两个DIV，每个DIV播放不同的视频，我该如何更改行

myVideo = $(".play_video").attr("rel")

是动态的，然后选择右div的rel属性.例如，第二个div看起来像:

<div>
    <a class="play_video" href="#" rel="/bin/another_video.mp4">Click to Watch a different Video</a>
</div>

我希望这很清楚！谢谢您的帮助.

解决方案

.attr()方法的问题在于，它仅获取匹配集中第一个元素的属性值.要单独获取每个元素的值，您可能必须使用方法.each()

要使其实际工作而不会循环链接，您可以在href属性(正确的工作方式)内设置视频参考，并通过以下方式调整代码:

html

<a class="play_video" href="/bin/video.mp4">Click to Watch Video</a>
<a class="play_video" href="/bin/another_video.mp4">Click to Watch a different Video</a>

脚本

$(document).ready(function() {
 $(".play_video").on("click", function(){
   $.fancybox({
     content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
     afterShow: function(){
        var myVideo = this.href;
        jwplayer("video_container").setup({
          flashplayer: "/bin/player.swf",
          file: myVideo,
          width: 640,
          height: 380,
        }); // jwplayer setup
     } // afterShow
   }); // fancybox
   return false; // prevents default 
 }); // on
}); // ready

注意:.on()需要jQuery 1.7 +

I can get the following simple scenario to work: A div on the page that when clicked will open a video using JW Player in an overlay window by FancyBox. Here is a stripped down code:

HTML:

<div>
    <a class="play_video" href="#" rel="/bin/video.mp4">Click to Watch Video</a>
</div>

jQuery:

$(document).ready(function() {
    $(".play_video").fancybox({
        content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
        afterShow: function()
            {
                var myVideo = $(".play_video").attr("rel");
                jwplayer("video_container").setup({
                    flashplayer: "/bin/player.swf",
                    file: myVideo,
                    width: 640,
                    height: 380,
                });
            }
    });
});

Here is my problem: if I want to display two DIVs each playing a different video how do I change the line

myVideo = $(".play_video").attr("rel")

to be dynamic and selecting the rel attribute of the right div. For example, the second div would look like:

<div>
    <a class="play_video" href="#" rel="/bin/another_video.mp4">Click to Watch a different Video</a>
</div>

I hope this is clear! Thank you for your help.

解决方案

The problem with the .attr() method is that it gets the attribute value for only the first element in the matched set. To get the value for each element individually, you may have to use the method .each()

To make it actually work without looping through your links, you could set the video reference inside the href attribute (the proper way to work) and tweak your code this way :

html

<a class="play_video" href="/bin/video.mp4">Click to Watch Video</a>
<a class="play_video" href="/bin/another_video.mp4">Click to Watch a different Video</a>

script

$(document).ready(function() {
 $(".play_video").on("click", function(){
   $.fancybox({
     content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
     afterShow: function(){
        var myVideo = this.href;
        jwplayer("video_container").setup({
          flashplayer: "/bin/player.swf",
          file: myVideo,
          width: 640,
          height: 380,
        }); // jwplayer setup
     } // afterShow
   }); // fancybox
   return false; // prevents default 
 }); // on
}); // ready

NOTE: .on() requires jQuery 1.7+

这篇关于使用FancyBox和JW Player时的jQuery选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！