wordpress 入队脚本问题（“$ 未定义”）答案

【问题标题】：wordpress enqueue script issues ("$ is not defined")wordpress 入队脚本问题（“$ 未定义”）
【发布时间】：2010-09-29 00:58:13
【问题描述】：

希望这对你们来说是一个很容易解决的问题:)

我正在构建一个 wordpress 主题，并且以前在 html 头标签中调用 jquery 脚本的效果很差。虽然这导致了 Opera 中的一些加载延迟，我怀疑这是因为我试图以两种方式同时加载 jquery ......无论如何我现在在 functions.php 文件中正确执行它，但我的进一步脚本依赖于jquery 玩的不好。

这是我现在如何将 jquery 和我的脚本（用于滑动面板）排队的 sn-p：

add_action('init', 'my_init');
function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true);
        wp_enqueue_script('jquery');
        wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js');
        echo "alert( 'Hello Admin!' );";
    }
}

这是我的滑动面板脚本：

$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
        $marginLefty.outerWidth() :
        0
                        });
                                    });
                            });

当我只是在头标签中调用 jquery 然后直接将此脚本放在脚本标签中时，这一切都是一种享受，但现在 firebug 显示它抛出“$ 未定义”并将 $ 更改为 jquery 产生“jquery未定义”...有人可以帮忙吗？

【问题讨论】：

标签： jquery wordpress

【解决方案1】：

使用jQuery 和大写Q 而不是$ 以使其工作。 Wordpress 通常包含一个脚本，该脚本最后调用jQuery.noConflict()，而$ 未定义。结果应该是这样的：

jQuery(function($) { //jQuery passed in as first param, so you can use $ inside
  $(".btn-slide").click(function(){
    var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
    });
  });
});

【讨论】：

@LachlanF - 是否有可能在之前 jQuery 被包含在页面中？
不敢相信一封信让我浪费了那么多时间。非常感谢！

【解决方案2】：

通过在 wp_enqueue 中执行此操作，确保您的脚本依赖于 jQuery -> wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

注意array('jquery')，这表明你的脚本依赖于jQuery。

【讨论】：

+1: 我把它当作 ...'/scripts/slide.js', 'jquery');它不起作用。将其添加为数组解决了该问题。谢谢达伦！

【解决方案3】：

我解决此问题的唯一方法是将您包含的脚本中的所有“$”替换为“jQuery”。

在您的情况下，您的新脚本将如下所示：

jQuery(document).ready(function(){
    jQuery(".btn-slide").click(function(){
        var jQuerymarginLefty = jQuery("#slide-panel");
    jQuerymarginLefty.animate({
      marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ? 
        jQuerymarginLefty.outerWidth() :
        0
                        });
                                    });
                            });

【讨论】：

【解决方案4】：

如果有人在这些好的提示之后仍然有问题，请阅读http://codex.wordpress.org/Function_Reference/wp_enqueue_script的详细信息

在该链接上，您可以找到各种情况的详细信息。

并确保为您使用的每个 JS 脚本调用 wp_enqueue_script。永远不要直接链接它们，你会没事的;）

【讨论】：

【解决方案5】：

将您的函数包装在所谓的"domReady" function：

<script>
(function($) {
   //insert function here
})(jQuery);
</script>

【讨论】：

【解决方案6】：

我知道这已经回答了，但想补充一下。

如果它是一个文件，那么问题很可能是包含 jQuery 作为脚本的依赖项。 wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

如果你有 jQuery 对象但没有 $ 你可以试试这个：

<script id="script-below-jquery-src">
(function($) {
   // Anything here can only immediately reference the DOM above it
   $(function(){
     //on DOM (document) ready
   });
})(jQuery);
</script>

此脚本属于 jQuery 脚本标签下方。

如果它仍然抱怨 jQuery 未定义，请检查您的 <head> 以获取 jQuery 脚本，如果它不存在，则说明您没有正确注册/排队。就我而言，我添加了一个过滤器来删除所有标签。要调试您可以使用...

add_filter('script_loader_tag', function($tag, $handle){
  /*maybe echo/print here*/
  return $tag . "<!-- Script for handle '$handle' -->";
}, 10, 2);

但老实说，这不会比只看标题更有用。

确保您使用的是add_action('wp_enqueue_scripts', /*function name*/);。许多其他钩子都为时已晚。

不要将 jQuery 源代码粘贴在标题中的 <?php wp_head(); ?> 上方。它的可维护性较差，尤其是使用 jQuery，如果插件等需要，脚本可能会被包含两次。

【讨论】：

【解决方案7】：

您必须确保首先使用上述数组 jQuery 技巧加载 jQuery：

wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

但最好的做法是定义一个自定义的无冲突变量，如下所示：

var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j(".btn-slide").click(function(){
        var $jmarginLefty = $j("#slide-panel");
        $jmarginLefty.animate({
            marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0
        });
    });
});

注意：您需要将$ 或jQuery 的任何其他用途替换为$j。此外，在此之后附加的任何脚本现在也需要遵循您的 $j 无冲突定义。

【讨论】：

【解决方案8】：

var $=jQuery;

但你可以使用 jQuery(function(){alert("Document Ready")});

【讨论】：