Question

我可以使用以下简单方案：单击页面上的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>

我希望这很清楚！谢谢你的帮助。

Answer 1

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

使用FancyBox和JW Player时的jQuery选择

1 个答案: