2016-07-26 32 views
1

我給。當我將它轉移到Dreamweaver時,我似乎無法讓jsfiddle代碼工作?我必須錯過簡單的事情?它在jsfiddle中工作正常。我添加了ready函數而不是onload,但它仍然不起作用。轉jsfiddle到dreamweaver

$("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>

回答

0

您在JS哈瓦語法錯誤。

我對某事發表了評論:add「});」到js,並刪除多餘的jquery引用。

代碼片斷現在的工作

+0

哇, Dreamweaver應該顯示錯誤,謝謝,它的工作很好:) – user3457159

0

我可以看到兩件事情:在同一時間1.9.1和2.1.0 1,你爲什麼要使用兩個版本的jQuery? 2,在你粘貼代碼時,$(「文件」)。就緒(函數(){ 是沒有正確關閉

你在控制檯或網絡收到任何錯誤?

+0

哇,它沒有在Dreamweaver中顯示錯誤,令人驚訝的是它有多簡單。謝謝。 – user3457159