Question

我正在尝试让这个codepen http://codepen.io/eternalminerals/pen/qdGvMo在http://eternalminerals.com/test/上的wordpress页面上工作

我知道，由于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控制台错误，但它的行为就好像没有像在codepen中那样控制html的javascript。任何帮助将不胜感激。谢谢！

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 embedded javascript on page doesn't work，似乎我所要做的就是用jQuery ready函数包围脚本：

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

http://eternalminerals.com/test/现在可以工作了！

jQuery JavaScript没有在Wordpress上工作，对无冲突模式语法感到困惑

2 个答案: