javascript - 如何使用事件监听器为不同的元素管理不同的事件？

Question

$(document).ready(function () 
{
    var player_1_listener = $('#myVid_1')[0];
    $f(player_1_listener).addEvent('ready', ready);

    var player_2_listener = $('#myVid_2')[0];
    $f(player_2_listener).addEvent('ready', ready);

    function addEvent(element, eventName, callback) 
    {
        if (element.addEventListener) 
        {
            element.addEventListener(eventName, callback, false);
        }
        else 
        {
            element.attachEvent(eventName, callback, false);
        }
    }

    function ready(player_id) 
    {
        //var froogaloop = $f(player_id);
        if (player_id === myVid_1)
        {
            var froogaloop = $f(player_id);
            function onFinish() 
            {
                froogaloop.addEvent('finish', function(data)
                {
                    /*var players_unloading;
                    players_unloading=$('#myVid_1');
                    $f(players_unloading[0]).api('unload');*/
                    toggleOverlay_1();
                    $f(froogaloop[0]).api('unload');
                });
            }
            //onFinish();
        }
        else if (player_id === myVid_2)
        {
            var froogaloop = $f(player_id);
            function onFinish() 
            {
                froogaloop.addEvent('finish', function(data)
                {
                    /*var players_unloading;
                    players_unloading=$('#myVid_1');
                    $f(players_unloading[0]).api('unload');*/
                    toggleOverlay_2();
                    $f(froogaloop[0]).api('unload');
                });
            }
            //onFinish();
        }
    }
    onFinish();
});

我有 2 个按钮，单击它们会打开 iframe 并播放视频。我试图让播放器在 iframe 中调用它的 api 暂停方法来暂停视频。如果我只使用一个 iframe 视频，我可以做到这一点，但是当有多个 iframe 视频时，我就无法做到这一点。

Answer 1

您将需要以尽可能多的代码重复使用的方式向函数添加参数。在我看来，您可以在所有相关函数中添加 playerid，并使用它来最小化 ready(player_id) 中的代码，方法是利用 player_id 作为主要 id 来帮助访问所有相关的视频项目。

$(document).ready(function () {
 var player = $('#myVid')[0];
 var player2 = $('#myVid2')[0];
 $f(player).addEvent('ready', ready); 
 $f(player2).addEvent('ready', ready); 

  function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
     element.addEventListener(eventName, callback, false);
    }
    else {
      element.attachEvent(eventName, callback, false);
    }
  }

  function ready(player_id) {
    var froogaloop = $f(player_id);

    function onFinish() {
      froogaloop.addEvent('finish', function(data) {
      toggleOverlay(player_id);
      resetVideo(player_id);
  });
 }
 onFinish();
}

});

function toggleOverlay(playerid){
  $("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
  $("#" + playerid).parent("#specialBox").parent().toggle();
  $("#" + playerid).parent("#specialBox").toggle();
}

function resetVideo(vidID)
{
   var player;
   player=$('#' + vidID);
   $f(player[0]).api('unload');
}

使用 froogaloop2.js 库的示例[旧]:http://codepen.io/Nasir_T/pen/pEmEJE

使用来自 vimeo 的 player.js 的示例[新改进]:http://codepen.io/Nasir_T/pen/GNKjbe

如果您需要更多帮助，请告诉我。