2016-05-28 4 views
-3


私は単純なスライダーを試みましたが、それはうまくいかなかったので、私はコードキャデバーの1つをコピーしていますが、まだ動作しません。
私は4つの異なるブラウザを使用していますが、すべて同じ問題があります。ボックスに入力することはできますが、投稿はしません。
jQueryスクリプトがnotepad ++で書かれているのはなぜ、ローカルに保存されたファイルでは動作しないのですか?

お願いします。

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

はありますファイルを直接開くか、ローカルサーバー(例: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'); 
}); 
} 

だけで実行します。

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

次のように別の方法として、あなたの体のタグを調整することができます:

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

良いキャッチ...私は内部機能が間違っていることに気付きました – charlietfl

+1

注意 '.val'は' .val() 'にする必要があります – charlietfl

関連する問題