无法让 Javascript 在 Wordpress 上运行

Question

我对 Web 开发和 JavaScript 非常陌生。我改编了另一个人的代码来创建我认为是一个非常简单的 svg 滚动动画效果。但是，我花了几个小时试图将这种效果从 codepen 带到我的 wordpress 演示站点。我确定我拥有所有资源，但仍然有问题，动画不会出现。我尝试在 chrome 上更改代码和调试，但外部 js 资源只有几个错误。

提前致谢！

你可以在这里看到codepen的工作效果（http://codepen.io/anon/pen/xZvKZj）

此代码当前无法运行的 wordpress 站点的链接是www.donatedtech.com/scroll

这是我将其放入 wordpress 上的 html 块中的完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script type="text/javascript">
    jQuery(function($){ 
      $(document).ready(function() {
        //variable for the 'stroke-dashoffset' unit
        var $dashOffset = $(".path1").css("stroke-dashoffset");
        //on a scroll event - execute function
        $(window).scroll(function() {
          //calculate how far down the page the user is 
          var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
          //convert dashoffset pixel value to interger
          var $newUnit = parseInt($dashOffset, 10);
          //get the value to be subtracted from the 'stroke-dashoffset'
          var $offsetUnit = $percentageComplete * ($newUnit / 100);
          //set the new value of the dashoffset to create the drawing effect
          $(".path1").css("stroke-dashoffset", $newUnit - $offsetUnit);
        });
      });
    });
    </script>

    <style>
    mydiv{
      font-family: avenir, helvetica, sans-serif;
      background: grey;
      color: green;
    }

    h1 {
      text-align: center;
      padding-bottom: 50px;
      font-size: 2.4em;
      font-weight: 200;
      letter-spacing: .07em;
    }

    svg {
      position: fixed;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      max-width: 480px;
      max-height: 340px;
    }

    .path1 {
      stroke-dashoffset: 1000;
      stroke-dasharray: 1000;
    }

    .frame1 {
      height: 500px;
    }
    </style>

    <div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div><div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div>

Answer 1

首先，让我向您介绍您最好的新朋友：浏览器的developer tools。

在 FireFox 或 Chrome（可能还有 IE）中，您可以通过右键单击元素打开开发工具，从出现的上下文菜单中选择“检查元素”，然后在开发工具中，您需要单击“控制台”选项卡以查看面板，该面板将向您显示您遇到的任何 javascript 错误。

在您的网站上这样做时，我发现抛出了以下错误：

TypeError: jQuery(...).footable is not a function
 scroll:111:21
TypeError: jQuery(...).live is not a function
 functions.js:1178:4
window.controllers is deprecated. Do not use it for UA detection. nsHeaderInfo.js:412:8
TypeError: this[binder] is not a function

这是告诉你三件事之一。要么：

1. jQuery 未加载（通过查看源代码和/或在控制台中运行一些 jQuery 命令，我们可以看到您的网站并非如此）。

或

1. 包含footable 函数的脚本未正确加载，但在您的脚本中被调用（不是在您的问题中，而是在网站上）。

或

1. footable（在本例中为 .examples）绑定的元素不存在，并且插件 footable 不够智能，不会爆炸。

除此之外的任何脚本都可能由于这些错误而损坏/无法运行。在尝试对您的特定脚本进行故障排除之前清除它们。

并且，为了获得一些额外的帮助，这里是对您的（否则很好！）代码的评论/观察：

这是多余的——这两行的作用完全相同：

jQuery(function($){ 
    $(document).ready(function() {
        // your code...

将其简化为：

jQuery(function($) { 
    // your code...

Answer 2

在 wordpress 中，最好将脚本放入函数文件中。这是我在主题中使用的示例，以确保正确加载我的脚本。下面的代码给出了一个提取 Jquery 的外部副本、一个外部脚本以及我在主题本身中的一个示例。

   wp_deregister_script('jquery');
   wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), false);
   wp_enqueue_script('jquery'); wp_enqueue_script('scrollToPlugin','http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js');
   wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', 'jquery', false, true );