jQuery JavaScript无法在Wordpress上运行，对无冲突模式语法感到困惑

我正在尝试让这个代码笔在我的wordpress页面上工作

我知道由于Wordpress处于无冲突模式，我必须将$改为jQuery，但我做到了，并确保脚本也在标题中（使用这个JS adder插件css javascript工具箱），但它仍然不能像代码笔那样工作。我在没有javascript的情况下测试了codepen，它的行为类似于wordpress页面，因此我知道问题一定出在javascript中

<script type='text/javascript'>
StarWars = (function() {

  /* 
   * Constructor
   */
  function StarWars(args) {
    // Context wrapper
    this.el = jQuery(args.el);

    // Audio to play the opening crawl
    this.audio = this.el.find('audio').get(0);

    // Start the animation
    this.start = this.el.find('.start');

    // The animation wrapper
    this.animation = this.el.find('.animation');

    // Remove animation and shows the start screen
    this.reset();

    // Start the animation on click
    this.start.bind('click', jQuery.proxy(function() {
      this.start.hide();
      this.audio.play();
      this.el.append(this.animation);
    }, this));

    // Reset the animation and shows the start screen
    jQuery(this.audio).bind('ended', jQuery.proxy(function() {
      this.audio.currentTime = 0;
      this.reset();
    }, this));
  }

  /*
   * Resets the animation and shows the start screen.
   */
  StarWars.prototype.reset = function() {
    this.start.show();
    this.cloned = this.animation.clone(true);
    this.animation.remove();
    this.animation = this.cloned;
  };

  return StarWars;
})();

new StarWars({
  el : '.starwars'
});
</script>

星战=（函数（）{
/* 
*建造师
*/
功能星战（args）{
//上下文包装器
this.el=jQuery（args.el）；
//播放开始爬网的音频
this.audio=this.el.find（'audio'）.get（0）；
//启动动画
this.start=this.el.find（'.start'）；
//动画包装器
this.animation=this.el.find（'.animation'）；
//删除动画并显示开始屏幕
这是reset（）；
//单击开始动画
this.start.bind（'click'，jQuery.proxy（function（））{
this.start.hide（）；
这个.audio.play（）；
this.el.append（this.animation）；
}这),；
//重置动画并显示开始屏幕
jQuery（this.audio）.bind（'end'，jQuery.proxy（function（））{
this.audio.currentTime=0；
这是reset（）；
}这),；
}
/*
*重置动画并显示“开始”屏幕。
*/
StarWars.prototype.reset=函数（）{
this.start.show（）；
this.clone=this.animation.clone（true）；
this.animation.remove（）；
this.animation=this.cloned；
};
返回星球大战；
})();
新星球大战({
艾尔：“《星球大战》”
});

我的网站页面上没有javascript控制台错误，但它的行为就像没有javascript控制代码笔中的html一样。任何帮助都将不胜感激。谢谢大家!

好的，多亏了它，我所要做的似乎就是用jQuery就绪函数围绕脚本：

jQuery(function() {
  /* your code here */
)};

---

现在工作了呜呼

如果您想快速更新jQuery调用并将jQuery传递给它自己的函数，那么您可以按如下所示进行操作：

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

   // $ Works! You can test it with next line if you like
   // console.log($);

   });

此外，我在下面亲自执行了这个方法，您可以将jQuery作为美元符号传入。注意：所有使用“$.api（）”而不是“jQuery.api（）”的jQuery代码都必须位于此代码段中，必要时还可以从外部脚本加载此代码段

    (function($) {

    // $ Works! You can test it with next line if you like
    // console.log($);

    })( jQuery );

您可以在此处找到更详细的示例链接：（）

---

这个解决方案是为wordpress设计的，但我在一个CMS服务引擎中使用，它在后端呈现所有JS文件，并且只发送一个视图。在这种情况下，我永远无法在典型的document.ready函数中使用美元符号声明，因为您正在尝试，所以我们的问题是相同的，只是后面有一个不同的引擎。这应该会有帮助，干杯，快乐编码

很棒的链接！！谢谢你的详细解释！！这在预渲染CMS系统（如LogiXML、Logi Analytics和Logi Info）中也起作用。任何呈现所有内容，然后将呈现内容发送到视图（包括JS）的CMS都使用这种方法。