1

我正在尝试将 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
4

3 回答 3

2

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

摆脱

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

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

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

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

于 2013-05-31T08:01:38.230 回答
1

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

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

并且 HERE 仅在整个 HTML 加载完成后执行。删除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();
});
于 2013-05-31T07:58:43.690 回答
0

你不应该添加

<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>
于 2013-05-31T08:55:08.697 回答