Question

希望这个对你们来说很容易解决：）

我正在构建一个wordpress主题，之前在html head标签中调用jquery脚本相当糟糕。这导致Opera中的一些加载延迟，我怀疑是因为我试图以两种方式同时加载jquery ...无论如何我现在正在functions.php文件中正确地执行它，但是我的进一步脚本依赖于jquery玩得不好。

这里是我现在如何排队jquery和我的脚本（用于滑动面板）的片段：

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

当我刚刚在head标签中调用jquery然后直接将此脚本放在脚本标签中时，这一切都很有效，但现在firebug显示它抛出“$ is not defined”并将$更改为jquery生成“jquery”没有定义“......任何人都可以帮忙吗？

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

Answer 2

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

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

Answer 3

如果有人在这些好提示之后仍有问题，请在http://codex.wordpress.org/Function_Reference/wp_enqueue_script

阅读详情

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

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

Answer 4

将您的功能包裹在所谓的"domReady" function：

中

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

Answer 5

我知道这已经得到了解答但想加入它。

如果它是一个文件，很可能问题是将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，如果插件需要，脚本可能会被包含两次。

Answer 6

我解决这个问题的唯一方法是更换所有＆＃34; $＆＃34;与＆＃34; jQuery＆＃34;在您包含的脚本中。

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

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

Answer 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无冲突定义。

Answer 8

var $ = jQuery;

但你可以使用jQuery（function（）{alert（＆＃34; Document Ready＆＃34;）}）;

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

8 个答案: