基本jquery滑块TypeError：$不是Wordpress上的函数

Question

我收到此错误：“TypeError：$不是函数$（'＃slider'）。list（{”

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://plumbsimple.com/wp-content/themes/bootstrapwp-87/js/basic-jquery-slider.min.js"></script>

         <script type="text/javascript">
              window.$ = jQuery;

              $(document).ready(function() {

                $('#slider').list({
                  'animation' : 'slide',
                  'width' : 700,
                  'height' : 300
                });

              });
        </script>

标题中的数据：

        <div id="slider"><ul class="list">
        <li><img src="<?php bloginfo( 'template_url' );?>/img/beach.jpg"></li>
        <li><img src="<?php bloginfo( 'template_url' );?>/img/hp-computers.jpg"></li>
        </ul>
        </div>

Answer 1

有两种变体：

1. 您尚未加载jQuery库。
2. 由$或其他内容导致prototype.js功能无法使用此功能，然后尝试使用jQuery功能代替$。

Answer 2

WP默认情况下将jQuery置于noConflict模式：（source）

  

注意： WordPress附带的jQuery库加载到"no conflict" mode。这是为了防止与其他的兼容性问题   WordPress可以加载的JavaScript库。

可以在控制台上轻松测试：

因此，如果您不使用任何可能与jQuery的$冲突的库，您可以将jQuery重新别名为$：

window.$ = jQuery;

将该行放在jQuery库之后的第一个脚本的最开头，它可以正常工作。

此外，您只需将所有$引用替换为jQuery，或使用其他别名，以防您与原型或其他库发生冲突。

编辑：实际上还会覆盖您的全局$。您可以将代码包装在IIFE中以创建可以安全使用$别名的范围：

(function($) {
    $(document).ready(function() {

        $('#slider').list({
            'animation': 'slide',
            'width': 700,
            'height': 300
        });

    });
})(jQuery);​

Answer 3

很可能首先将“$”替换为“jQuery”并将“$”传递给函数将使该错误消失。示例如下。

          `jQuery(document).ready(function($) {

            $('#slider').list({
              'animation' : 'slide',
              'width' : 700,
              'height' : 300
            });

          });`

如果您喜欢wordpress codex，它们会提供正在发生的事情的解决方案 http://codex.wordpress.org/Function_Reference/wp_enqueue_script