2016-05-28 45 views
-3


我試圖做一個簡單的滑塊,但沒有奏效,所以我複製一個代碼cademy,但它仍然工作。
我已經使用4個不同的瀏覽器都有同樣的問題,我可以在框中鍵入,但不會發布,並顯示在下面。
爲什麼我用記事本++編寫的jQuery腳本不能處理本地存儲的文件?

請幫助嗎?

的Html

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<link type='text/css' href="stylesheet.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
    <form> 
    <div class="form-group"> 
     <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea> 
    </div> 
    </form> 
    <div class="button-group pull-right"> 
    <p class="counter">140</p> 
    <a href="#" class="btn btn-primary">Post</a> 
    </div> 
    <ul class="posts"> 
    </ul> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="script.js"></script> 

</body> 
</html> 

AMMENDED
的script.js

$(document).ready() { 
$('.btn').click(function() { 
    var post = $('.status-box').val() 
     $('<li>').text(post).prependTo('posts'); 
}); 
}; 

謝謝大家,這已得到糾正,現在工程:)

+0

是:

$(function() { $('btn').click(function() { var post = $('status-box').val $('<li>').text(post).prependTo('.posts'); }); }); 

或者可以按如下調整你身體的標籤你直接打開這個文件還是你掛載了一個本地服務器(例如:XAMPP,WAMP等等)?如果您直接打開文件,這是正常的,它不起作用。否則,我不知道什麼是錯的。 –

+0

如果直接從我的電腦打開它,爲什麼文件不能正常工作?我不明白.. – tom1988

+0

'// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'是一個無協議的url。這樣設計的,它允許使用與您正在查看的頁面相同的協議來加載文件。當你直接打開文件時,它將使用'file:'協議。也就是說,您將嘗試打開不存在的'file:/// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'。 –

回答

2

val是一個jQuery功能.. 。您需要()來調用它,以便它返回元素的值。由於您的代碼現在正在嘗試將函數對象設置爲文本。

您同時還使用不正確選擇$('btn')$('status-box')其正在尋找不存在的變量<btn><status-box>

添加點前綴,兩個代表類:

$('.btn')$('.status-box')

+0

除了這個答案,你可以刪除'main'函數的定義('var main = function(){/ * ... * /};'),因爲你不調用它。 –

+0

糾正,仍然不起作用 – tom1988

0

以及什麼在對方的回答提到的,我不相信你的主要方法是不斷調用。如果它未被調用,則事件處理程序不會被附加。 的主要方法是通過jQuery更容易成立,所以不是:

var main = function() { 
$('btn').click(function() { 
    var post = $('status-box').val 
     $('<li>').text(post).prependTo('.posts'); 
}); 
} 

只要做到:

<body onload="main()"> 
+1

好趕上...我只注意到函數裏面出了什麼問題 – charlietfl

+1

注意'.val'應該是'.val()' – charlietfl

相關問題