javascript - 基本 jquery 滑块 TypeError: $ is not a function on Wordpress

Question

我收到此错误：“TypeError: $ is not a function $('#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

很有可能用“jQuery”编写替换第一个“$”并将“$”传递给函数将使该错误消失。下面的例子。

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

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

          });`

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

Answer 2

有 2 种变体：

1. 您还没有加载 jQuery 库。
2. $由于或某些原因，它不能按功能prototype.js使用，然后尝试使用jQueryfunction 而不是$.

Answer 3

默认情况下，WP 将 jQuery 置于noConflict模式：( source )

注意： WordPress 附带的 jQuery 库以“无冲突”模式加载。这是为了防止与 WordPress 可以加载的其他 javascript 库的兼容性问题。

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

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

window.$ = jQuery;

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

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

编辑：实际上也有一些东西覆盖了你的全局$。您可以将代码包装在 IIFE 中以创建可以安全使用$别名的范围：

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

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

    });
})(jQuery);​