将 jsfiddle 传输到 dreamweaver

Question

我给。当我将它传输到 Dreamweaver 时，我似乎无法让 jsfiddle 代码工作？我一定是错过了一些简单的东西？？它在 jsfiddle 中工作正常。我添加了 ready 函数而不是 onload，但它仍然无法正常工作。

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

      var h1 = $('div#greeting h1');

      h1.hide().contents().each(function() {
        var words;
        if (this.nodeType === 3) {
          words = this.data.split(/\s+/).map(function(w) {
            return '<span>' + w + '</span>';
          }).join('');
          $(this).replaceWith(words);
        } else if (this.nodeType === 1) {
          $(this).html($(this).html().split(/\s+/).map(function(w) {
            return '<span>' + w + '</span>';
          }).join(''));
        }
      });

      h1.find('span').hide().each(function() {
        if (!$.trim(this.innerHTML)) {
          $(this).remove();
        }
      });

      $('#start').on('click', function() {
        h1.show().find('span').each(function(i, e) {
          h1.queue(function(next) {
            $.when($(e).fadeIn(150).fadeOut(150)).done(next);
          });
        });
      });
      $('#stop').on('click', function() {
        h1.finish();
      });
      $('#reset').on('click', function() {
        h1.finish();
      });

.box {
  border: 1px solid #E38E34;
  background-color: #FFE7BF;
  height: 150px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
#title {
  margin: 5px;
  border-bottom: 1px solid #E38E34;
  color: #C46908;
  font-weight: bold;
}
#message {
  margin: 5px;
}
h1 {
  font-size: 50px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" type="text/css" href="styles.css">

  <title>TedsCode</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

  <script type="text/javascript" src="speedread.js"></script>
</head>

<body>
  <div class="box" />
  <div id="title"><span id="name">Title</span> 
  </div>
  <div id="message" />
  <div id="greeting" />
  <input type="button" value="Read" id="start" />
  <input type="button" value="Stop" id="stop" />
  <input type="button" value="Reset" id="reset" />
  <h1><center>This is a test to see if this script displays one word at a time and functions correctly.</center></h1>

</body>

</html>

Answer 1

你的js语法错误

我对某事发表评论：添加"});"到 js，并删除 jquery.

的冗余引用

代码片段现在有效

Answer 2

我可以看到两件事： 1-为什么要同时使用 jquery 的两个版本 1.9.1 和 2.1.0？ 2-在您粘贴的代码中， $("document").ready(function() { 未正确关闭

您是否在控制台或网络中收到任何错误？

将 jsfiddle 传输到 dreamweaver

Transfer jsfiddle to dreamweaver

html

javascript

css

dreamweaver

jsfiddle