第一次和第二次點擊之間的不同動作？

Question

我有一些鏈接，名爲「yt-link」（+數據attr。）和一些div與隱藏的youtube視頻。如果我點擊「yt-link」，隱藏的div變得易於使用。通過按視頻上的播放按鈕，視頻開始播放。那麼，非常好。如果我再次按下「yt-link」，div就會隱藏，但視頻不會停止。所以我通過按下「yt-link」來添加一個腳本來重新加載這個視頻。它也可以。

我的問題：重新加載腳本觸發每次點擊，但它應該只在每次點擊時觸發，關閉點擊。有沒有辦法？

這就是我的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); 
}); 

可選：你知道更好的辦法阻止YT-視頻？

Answer 1

一個更好的解決方案將是使用close事件像

$(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); 
});