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 - 在您粘贴的代码中，$（＆＃34;文档＆＃34;）。ready（function（）{ 没有正确关闭

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

将jsfiddle转移到dreamweaver

2 个答案: