Question

我有一些链接，名为＆＃34; yt-link＆＃34; （+ data attr。）和一些隐藏的YouTube视频的div。如果我点击＆＃34; yt-link＆＃34;，隐藏的div就变成了可变的。按下视频上的播放按钮，视频即开始播放。所以，非常好。如果我按下＆＃34; yt-link＆＃34; div再次隐藏，但视频不停止。所以我通过按下＆＃34; yt-link＆＃34;添加一个scrippt来重新加载这个视频。它也有效。

我的问题：每次点击都会触发重新加载脚本，但它应该只在每次点击时点击，即关闭点击。有办法吗？

这就是我的div脚本：

$(function(){
    $(".yt-link").click(function(){
        var attrVal = $(this).attr('data-filter');
        $box = $('.yt-video-wrapper[data-filter="'+attrVal+'"]');

        // slideIN/Out the content
        $box.slideToggle();
    });
})

那就是YT重装脚本：

$('.yt-link').click(function(){

       // get the iframe URL
       var url = $('.yt-video').attr('src');

       // src to null, this stops the video been playing
       $('.yt-video').attr('src', '');

       // URL back to iframe
       $('.yt-video').attr('src', url);
});

可选：您知道停止视频的更好方法吗？

Answer 1

更好的解决方案是使用像

这样的近似事件

$(function () {
    $(".yt-link").click(function () {
        var attrVal = $(this).attr('data-filter');
        var $box = $('.yt-video-wrapper[data-filter="' + attrVal + '"]');

        // slideIN/Out the content
        $box.slideToggle().toggleClass('open');
        if (!$box.hasClass('open')) {
            $box.trigger('video-close');
        }
    });
})

$('.yt-link').on('video-close', function () {

    // get the iframe URL
    var url = $('.yt-video').attr('src');

    // src to null, this stops the video been playing
    $('.yt-video').attr('src', '');

    // URL back to iframe
    $('.yt-video').attr('src', url);
});

第一次和第二次点击之间的不同行为

1 个答案: