javascript - 无法让 Javascript 在 Wordpress 上运行

Question

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

提前致谢!

在codepen上可以看到效果(http://codepen.io/anon/pen/xZvKZj)

此代码当前无法正常工作的 wordpress 站点的链接是 www.donatedtech.com/scroll

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

<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

首先，让我向您介绍您最好的新 friend :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 绑定(bind)的元素(在本例中是 .examples)不存在，插件 footable不够聪明，不会爆炸。

很可能由于这些错误，超出此范围的任何脚本都被破坏/无法运行。在尝试对您的特定脚本进行故障排除之前清除它们。

并且，对于一些额外的帮助，这里是对您上面的代码(否则很好!)的评论/观察:

这是多余的——这两行做完全一样的事情:

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

将其简化为:

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