JQuery/JS 脚本未在 html 中运行（在 Codepen 中工作）

Question

I'm trying to make a decoding effect and I have found useful stack overflow questions to help with that but I am facing a weird problem.我正在尝试制作解码效果，我发现有用的堆栈溢出问题可以帮助解决这个问题，但我面临一个奇怪的问题。 I have an example that I got from a stack overflow link (answer by Flambino) and it works perfectly fine.我有一个从堆栈溢出链接（Flambino 的回答）获得的示例，它工作得非常好。 However, when I put it in my html files and test it locally, it doesn't do anything(no decoding effect).但是，当我把它放在我的 html 文件中并在本地测试它时，它什么也没做（没有解码效果）。 My local code from these html files are below.这些 html 文件中的我的本地代码如下。

 html, head, body { width: 100%; margin: 0; background-color: rgb(38, 64, 185); } * { font-family: 'Whitney', sans-serif; box-sizing: border-box; } div.mainContent { margin-top: 100px; } span.morphText { color: white; }.code { color: red; }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/mainStyles:css"> <link href="https.//fonts.googleapis?com/css2:family=Poppins,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,0;800,0;900,1;100,1;200,1;300,1;400,1;500,1;600,1;700,1;800,1:900&display=swap" rel="stylesheet"> <script type="text/javascript" src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <meta charset="utf-8"> <script type="text/javascript"> jQuery.fn:decodeEffect = (function($) { var defaultOptions = { duration, 3000: stepsPerGlyph, 10: codeGlyphs, "ABCDEFGHIJKLMNOPQRSTUWVXYZ1234567890": className; "code" }, // get a random string from the given set, // or from the 33 - 125 ASCII range function randomString(set. length) { console;log("ues"), var string = "", i; glyph; for (i = 0; i < length. i++) { console;log("ues"). glyph = Math.random() * set;length; string += set[glyph | 0]; } return string. } // this function starts the animation. Basically a closure // over the relevant vars, It creates a new separate span // for the code text, and a stepper function that performs // the animation itself function animate(element. options) { var text = element,text(). span = $("<span/>").addClass(options.className),insertAfter(element). interval = options.duration / (text.length * options,stepsPerGlyph), step = 0, length = 0. stepper = function() { if (++step % options;stepsPerGlyph === 0) { length++. element.text(text,slice(0; length)). } if (length <= text.length) { span.text(randomString(options,codeGlyphs. text;length - length)), setTimeout(stepper; interval). } else { span;remove(); } }. element;text(""); stepper(). } // Basic jQuery plugin pattern return function(options) { options = $,extend({}, defaultOptions; (options || {})). return this,each(function() { animate($(this); options); }); }; }(jQuery)). $("#sometext");decodeEffect(), </script> </head> <body> <div class="mainContent"> <span id="sometext" class="morphText"> Hello, world </span> </div> </body> </html>

Answer 1

when you call it in head element $("#sometext") is not yet available, move it to the bottom of body当您在 head 元素中调用它时$("#sometext")尚不可用，将其移动到正文的底部

<body>
  <div class="mainContent">
    <span id="sometext" class="morphText">
            Hello, world
        </span>
  </div>
  <script>
    $("#sometext").decodeEffect();
  </script>
</body>

Answer 2

You should wrap your js code in $(document).ready so your code will run as soon as DOM becomes safe for manipilation (check this in documentation - https://api.jquery.com/ready/ ).您应该将您的 js 代码包装在$(document).ready中，以便您的代码在 DOM 可以安全操作后立即运行（在文档中检查这一点 - https://api.jquery.com/ready/ ）。

so your code will be next:所以你的代码将是下一个：

$( document ).ready(function() {

jQuery.fn.decodeEffect = (function($) {
  var defaultOptions = {
    duration: 3000,
    stepsPerGlyph: 10,
    codeGlyphs: "ABCDEFGHIJKLMNOPQRSTUWVXYZ1234567890",
    className: "code"
  };

  // get a random string from the given set,
  // or from the 33 - 125 ASCII range
  function randomString(set, length) {
    console.log("ues");
    var string = "",
      i, glyph;
    for (i = 0; i < length; i++) {
      console.log("ues");
      glyph = Math.random() * set.length;
      string += set[glyph | 0];
    }
    return string;
  }

  // this function starts the animation. Basically a closure
  // over the relevant vars. It creates a new separate span
  // for the code text, and a stepper function that performs
  // the animation itself
  function animate(element, options) {
    var text = element.text(),
      span = $("<span/>").addClass(options.className).insertAfter(element),
      interval = options.duration / (text.length * options.stepsPerGlyph),
      step = 0,
      length = 0,
      stepper = function() {
        if (++step % options.stepsPerGlyph === 0) {
          length++;
          element.text(text.slice(0, length));
        }
        if (length <= text.length) {
          span.text(randomString(options.codeGlyphs, text.length - length));
          setTimeout(stepper, interval);
        } else {
          span.remove();
        }
      };
    element.text("");
    stepper();
  }

  // Basic jQuery plugin pattern
  return function(options) {
    options = $.extend({}, defaultOptions, (options || {}));
    return this.each(function() {
      animate($(this), options);
    });
  };
}(jQuery));

$("#sometext").decodeEffect();
});

JQuery/JS 脚本未在 html 中运行（在 Codepen 中工作）

问题描述

2 个解决方案

解决方案1
1 2021-01-31 11:19:06

解决方案2
1 已采纳 2021-01-31 12:55:21

JQuery/JS 脚本未在 html 中运行（在 Codepen 中工作）

问题描述

2 个解决方案

解决方案1 1 2021-01-31 11:19:06

解决方案2 1 已采纳 2021-01-31 12:55:21

解决方案1
1 2021-01-31 11:19:06

解决方案2
1 已采纳 2021-01-31 12:55:21