Question

我正在创建自己的HTML5视频播放器并将其打包为可重复使用的jQuery插件。我需要在一定程度上终止一个功能，因为当我按下播放时，如果之后创建了一个玩家的奇数次，播放器将播放，然后自行暂停。

HTML控件集标记（使用javascript插入）

<div class="meo">
    <video>
        <source src="example.mp4">
        <source src="example.webm">
    </video>
    <ul>
        <li class="playp"></li> <!-- Ignore everything between here -->
        <li class="ctime"></li>
        <li class="progr">
            <div class="progb"></div>
        </li>
        <li class="ttime"></li>
        <li class="fs"></li> <!-- and here -->
    </ul>
</div>

的Javascript

$.fn.meo = function() {
    return this.each(function() {
        var vid = $(this);
        var playp = $(".meo .playp");
        vid.wrap('<div class="meo"></div>');
        vid.after('<ul><li class="playp"></li><li class="ctime"></li><li class="progr"><div class="progb"></div></li><li class="ttime"></li><li class="fs"></li></ul>');

        $.fn.handlePlay = function() {
            var video = $(this).parent().siblings().get(0); // Getting the correct video element
            alert(video); // To show value of "video" (Returns multiple times depending on how many of the controlsets as above are found (This is not what I want))
            if (video.paused || video.ended) { // Testing if the video is playing
                video.play(); // After this I want to prevent the rest of the function executing
                return;
            } else {
                video.pause();
                return; // Terminate function
            };
        };

        playp.click(function(e) {
            $(this).handlePlay();
        });
    });
});

请帮忙。谢谢！

Answer 1

playp.click(function(e) {
   $(this).handlePlay();
});

每次$.each()迭代时，都会设置一个点击事件处理程序。这意味着即使您只点击一次元素，也会多次调用handlePlay()。

使用委托事件处理程序或仅使用新创建的元素来附加事件处理程序

委托事件：使用静态父元素将事件处理程序应用于

$(document).on("click",".meo .playp",function(){
  $(this).handlePlay();
});
$.fn.meo = function() {...};

或者在新创建的元素本身上设置事件

vid.find(".playp").click(function(){
    $(this).handlePlay();
});

此外，您无需每次都在$.fn.handlePlay创建this.each()，因此可以将其移到其外部。

 $.fn.handlePlay = function() { ... }
 $.fn.meo = function() { ... }

Javascript - 在函数中使用return并不会终止函数

1 个答案: