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

Question

我正在尝试在http://eternalminerals.com/test/的 wordpress页面上使用此Codepen http://codepen.io/eternalminerals/pen/qdGvMo

我知道因为Wordpress处于无冲突模式，所以我必须将$更改为jQuery，但是我做到了，并确保脚本也位于标头中（使用此JS加法器插件css-javascript-toolbox），但是仍然无法像Codepen一样工作。 我在没有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>

我的网站页面上没有javascript控制台错误，但是它的行为就像没有javascript一样在codepen中控制html。 任何帮助将不胜感激。 谢谢！

Answer 1

如果您想快速更新jQuery调用并将jQuery传递给它自己的函数，则可以如下所示：

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

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

   });

此外，下面我自己执行了此方法，您可以将jQuery作为美元符号传递。 注意：所有使用“ $ .apis（）”而不是“ jQuery.apis（）”的jQuery代码都必须在此代码段内，如果需要，您也可以从外部脚本加载该代码段。

    (function($) {

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

    })( jQuery );

您可以在此处找到更详细的示例链接：（ https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ ）

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

Answer 2

好的，由于页面上的Wordpress嵌入式javascript无法正常工作 ，看来我要做的就是用jQuery ready函数包围脚本：

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

http://eternalminerals.com/test/现在可以正常使用！