JavaScript在我的wordpress页面中

Question

下面是我的Js代码，我一直试图在我的wordpress页面使用，但它不起作用。请让我知道如何写在我的wordpress页面。折叠功能的主要思想是卸载Vimeo视频，当用户单击“关闭”时，该视频以插件easy modal的方式打开。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script type="text/javascript">
var iframe = $('.vimeo-player')[0];
var player = $f(iframe);

$('.close-modal').click(function() {
    alert('stoped');
    player.api('unload');
});
</script>

您可以清楚地看到代码在下面的小提琴中工作得很好：http://jsfiddle.net/8CV2S/161/

Iframe代码：

<iframe class="vimeo-player" src="http://player.vimeo.com/video/76079" width="1000px" height="500px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Answer 1

假设此代码位于页面的head中，那么问题是当代码执行时，您所引用的元素不存在：

$('.vimeo-player')
$('.close-modal')

由于jQuery没有找到匹配项，所以它不会对它们做任何事情。为了等待DOM完成加载，只需将代码包装在jQuery函数中：

$(function () {
    var iframe = $('.vimeo-player')[0];
    var player = $f(iframe);

    $('.close-modal').click(function() {
        alert('stoped');
        player.api('unload');
    });
});

此外，您可能在这里有一个错误：

var player = $f(iframe);

除非这是你正在使用的API的一部分？(一位评论者说是的。)如果这是在您的浏览器控制台上抛出一个错误，类似于$f是未定义的，那么您的意思可能是：

var player = $(iframe);

不过，这只是猜测而已。我不知道Vimeo API。

Answer 2

尝试将其添加到document.ready中：

$(document).ready(function() { 
  var iframe = $('.vimeo-player')[0];
  var player = $f(iframe);

  $('.close-modal').click(function() {
    alert('stoped');
    player.api('unload');
  });

});

请参阅http://api.jquery.com/ready/

检查是否有语法错误。