为什么我会得到一个的ReferenceError：未定义

我试图jQuery的添加到我的网页，我虽然收到此错误：的ReferenceError：预览没有定义为什么我会得到一个的ReferenceError：未定义

我在的JS目录下的js文件我主题：

jQuery(document).ready(function() { 
    function preview() { 
     var hoverhome = 'url("images/Screen2.png") no-repeat'; 
     var empty = ''; 
     //home 
     $('nav .home a').hover(function() { 
      $('.viewport').css('background-image', hoverhome); 
     }); 
     $('nav .home a').onmouseout(function() { 
      $('.viewport').css('background-image', empty); 
     }); 
    } 
});

我有这个在我的函数文件：

function add_my_script() { 
    wp_enqueue_script(
     'preview', 
     get_template_directory_uri() . '/js/scriptfile.js', 
     array('jquery') 
    ); 
}

这是我的HTML head标签：

<head> 
    <meta charset="<?php bloginfo('charset'); ?>" /> 
    <title><?php wp_title('|','true','right'); ?><?php bloginfo('name'); ?></title> 
    <meta name="viewport" content="width=device-width" /> 
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url'); ?>" /> 
    <script type='text/javascript' src='<?php bloginfo('template_url'); ?>/scriptfile.js?  ver=1.7.1'></script> 
    <?php wp_head(); ?> 
</head>

，这是在我的头调用函数：

<div class="viewport"> 
    <script type="text/javascript"><!--//--><![CDATA[//><!-- 
     preview(); 
    //--><!]]></script> 
</div>

最后，这是我的CSS：

.viewport 
{ 
height: 400px; 
width: 400px; 
position: relative; 
top: -90px; 
margin: 0 auto; 
}

不过。我在萤火虫中得到这个错误：

ReferenceError: preview is not defined

来源

2013-05-31 Chris

预览（）创建函数文档准备就绪后，您不能在

您已经定义preview一个函数内。这范围它的功能，所以它不是一个全球性的，你不能从除了该函数内的任何地方调用它。

摆脱

jQuery(document).ready(function() { 
});

包装的。它没有做任何有用的事情，它正在破坏你的代码。

您还需要确保您使用与调用它或更早的脚本相同的脚本来定义preview。（或者你需要延迟执行，如下所述）。

请注意，如果您在涉及的元素存在之前调用preview，那么它不会执行任何操作。所以你还需要确保当你打电话时，你在他们存在之后这样做。直接拨打电话标头可能不会那样做。将调用移动到页脚或将其包装在一个document.ready事件处理程序中（正如您当前为函数声明所做的那样）。

来源

2013-05-31 08:01:38 Quentin

我已经删除了这个包装，但错误依然存在。 – Chris

你不应该添加

<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/scriptfile.js?  ver=1.7.1'></script>

您<head>。

你应该勾你的函数add_my_script像这样的（你可以只是你add_my_script功能后添加以下代码片段）：

add_action('wp_enqueue_scripts', 'add_my_script');

它钩住wp_enqueue_scripts后，当它在调用wp_head(); WordPress会自动添加脚本你的头文件。

为了避免范围界定错误，rmove的document ready包装：

function preview() { 
     //the rest of your code here 
    }

调用DOM后的功能已准备就绪：您的代码应该是这样的：

<div class="viewport"> 
    <script type="text/javascript"><!--//--><![CDATA[//><!-- 
    jQuery(document).ready(function($){ 
     preview(); 
    }); 
    //--><!]]></script> 
</div>

来源

2013-05-31 08:55:08 RRikesh

我已经添加了你的代码，但积累了更多的错误。 TypeError：$不是函数，原始错误ReferenceError：预览未定义 – Chris

尝试用'jQuery'代替预览函数中的'$' – RRikesh

您确定该文件正在被包含吗？ – RRikesh

为什么我会得到一个的ReferenceError：未定义

相关问题