为什么我收到 ReferenceError: not defined答案

【问题标题】：Why am I getting a ReferenceError: not defined为什么我收到 ReferenceError: not defined
【发布时间】：2013-05-31 07:53:44
【问题描述】：

我正在尝试将 jQuery 添加到我的页面，但我收到此错误：ReferenceError: preview is not defined

我的主题的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> 
    <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

【问题讨论】：

preview() 函数是在文档准备好之后创建的，所以你不能在
@Yvette 我需要检查什么？我没有看到链接..
相关：stackoverflow.com/q/3773356/218196，stackoverflow.com/q/15478041/218196

标签： javascript jquery css wordpress

【解决方案1】：

您在函数中定义了preview。这将其范围限定为该函数，因此它不是全局的，您不能从该函数内部以外的任何地方调用它。

摆脱

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

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

您还需要确保在与调用它的脚本相同的脚本或之前的脚本中定义preview。（或者您需要延迟执行，如下所述）。

请注意，如果您在它触及的元素存在之前调用preview，那么它不会做任何事情。所以你还需要确保当你调用它时，你是在它们存在之后才这样做的。将调用直接放在 header 中可能不会这样做。将调用移至页脚或将其包装在 document.ready 事件处理程序中（就像您当前对函数声明所做的那样）。

【讨论】：

【解决方案2】：

preview() 函数在定义之前被调用。该函数在

中定义

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

只有在整个 HTML 加载完成后才会执行 HERE。去掉preview()调用，在定义后面加上：

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

【讨论】：

对，firebug 中的“ReferenceError: preview is not defined”错误。

【解决方案3】：

你不应该添加

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

致您的<head>。

你应该像这样挂钩你的函数add_my_script（你可以在你的add_my_script函数之后添加以下sn-p）：

add_action( 'wp_enqueue_scripts', 'add_my_script' );

连接到wp_enqueue_scripts后，WordPress会在你的头文件中调用wp_head();时自动添加你的脚本。

为避免范围界定错误，请移除 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>

【讨论】：

我已经添加了你的代码，但是积累了更多的错误。 TypeError: $ is not a function and the original error ReferenceError: preview is not defined
尝试用jQuery替换预览功能中的$
您确定该文件已包含在内吗？
我不确定，有没有办法检查它是否是？
另外，将 jQuery 替换为 $ 只会将错误更改为另一个 TypeError: $ is not a function