0

我可以让以下简单场景工作：页面上的一个 div，单击该 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>

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

4

1 回答 1

0

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

于 2012-11-12T00:43:53.500 回答