流動遊戲在一個頁面中尋找多個按鈕

Question

我在一個頁面中有兩個視頻，每個視頻都有搜索按鈕，但是當我點擊第一個視頻上的搜索按鈕時，第二個視頻也有效。但是當我點擊在它的正常工作的第二個視頻的搜索按鈕，所以我希望每個自成體系的獨立視頻

flowplayer(function(api, root) { 

$(".rewind").click(function (rebtn) { 
    if (api.playing) { 
    //var target = $(this).attr("id") == "forward" ? 3 : -3; 

    var target = document.getElementById(jQuery(rebtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? -3 : -3; 

    api.seek(api.video.time + target); 
    } 
}); 

$(".forward").click(function (fwtn) { 
    if (api.playing) { 
    //var target = $(this).attr("id") == "forward" ? 3 : -3; 
     var target = document.getElementById(jQuery(fwtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? 3 : 3; 

    api.seek(api.video.time + target); 
    } 
}); 

}); 








<div class="video-container"> 
      <div class="flowplayer player"> 
        <video class="myvideo" id="myvideo"> 
       <source type="video/mp4" src="flow/1.mp4"/> 
       </video> 
       <div class="buttons"> 
       <a href="#" class="forward">forward</a> 
       <a href="#" class="rewind">rewind</a> 
       </div> 
        <div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div> 
       </div> 

      </div> 



<div class="video-container"> 
      <div class="flowplayer player"> 
        <video class="myvideo" id="myvideo1"> 
       <source type="video/mp4" src="flow/1.mp4"/> 
       </video> 
       <div class="buttons"> 
       <a href="#" class="forward">forward</a> 
       <a href="#" class="rewind">rewind</a> 
       </div> 
        <div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div> 
       </div> 

      </div> 

Answer 1

你flowerplayer功能爲每個視頻運行兩次，一次;因此，您將click處理程序綁定到所有帶有.rewind/.forward類型的按鈕兩次。

你可以讓你的綁定更具體是這樣的：

$(root).on("click", ".rewind", function (rebtn) {... 

這樣，每個功能運行時，它只會增加一個處理程序適用於該球員的倒退/前進按鈕。

你也很可能簡化爲一個處理程序：

flowplayer(function (api, root) { 
    $(root).on("click", ".rewind, .forward",function (rebtn) { 
     if (api.playing) { 
      var target = $(this).hasClass("forward") ? 3 : -3; 
      api.seek(api.video.time + target); 
     } 
    }); 
}); 

工作DEMO