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

i am trying to add jQuery to my page, I am getting this error though: ReferenceError: preview is not defined

我试图将jQuery添加到我的页面,但我收到此错误:ReferenceError:未定义预览

I have a js file in the js directory of my theme:

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

I have this in my functions file:

我在我的函数文件中有这个:

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

This is in my html head tag:

这是我的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>

and this is in my header to call the function:

这是在我的标题中调用函数:

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

finally, this is my css:

最后,这是我的css:

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

But. I'm getting this error in firebug:

但。我在firebug中收到此错误:

ReferenceError: preview is not defined

3 个解决方案

#1

You have defined preview inside a function. That scopes it to that function, so it isn't a global and you can't call it from anywhere other than inside that function.

您已在函数内定义了预览。它将其范围限定为该函数,因此它不是全局函数,您无法从该函数内部以外的任何位置调用它。

Get rid of the

摆脱了

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

wrapper. It isn't doing anything useful and it is breaking your code.

包装。它没有做任何有用的事情,它破坏了你的代码。

You also need to make sure that you define preview in either the same script as the one that calls it or an earlier one. (Or you need to delay execution as described below).

您还需要确保在与调用它或前一个脚本相同的脚本中定义预览。 (或者您需要延迟执行,如下所述)。

Note that if you call preview before the elements it touches exist, then it isn't going to do anything. So you also need to make sure that when you call it, you are doing so after they exist. Putting the call directly in the header probably won't do that. Move the call to the footer or wrap it in a document.ready event handler (as you are currently doing for the function declaration).

请注意,如果您在触摸的元素存在之前调用预览,那么它将不会执行任何操作。因此,您还需要确保在调用它时,它们存在后才会这样做。将呼叫直接置于标头中可能不会这样做。将调用移动到页脚或将其包装在document.ready事件处理程序中(正如您当前为函数声明所做的那样)。

#2

The preview() function is called before it is defined. The function is defined in

在定义之前调用preview()函数。该功能定义于

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

and HERE is executed only after the entire HTML has been loaded. Remove the preview() call, and add it after the definition:

只有在加载完整个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();
});

#3

You should NOT add

你不应该添加

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

to your <head>.

到你的。

You should hook your function add_my_script like this(you can add the following snippet just after your add_my_script function):

您应该像这样挂钩您的函数add_my_script(您可以在add_my_script函数之后添加以下代码段):

add_action( 'wp_enqueue_scripts', 'add_my_script' );

After hooking it to wp_enqueue_scripts, WordPress will automatically add your script when it calls wp_head(); in your header file.

将它挂钩到wp_enqueue_scripts后,WordPress会在调用wp_head()时自动添加脚本。在您的头文件中。

To avoid scoping errors, rmove the document ready wrapper:

要避免确定范围错误,请移除文档就绪包装器:

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

Call the function after the DOM is ready: Your code should be like:

在DOM准备好之后调用该函数:您的代码应该是:

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

#1