Question

我正在尝试将jQuery添加到我的页面，但我收到此错误：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> 
    <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;
}

但是。我在firebug中遇到这个错误：

ReferenceError: preview is not defined

Answer 1

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

摆脱

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

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

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

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

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

Answer 3

你不应该添加

<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后，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>

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

3 个答案: