jqueryでサンプルどおりの挙動にならない

http://semooh.jp/jquery/api/effects/show/speed%2C+%5Bcallback%5D/のソースを貼り付けて挙動を確認したかったのですが、ボタンを押しても、何も起こりません。

修正箇所を教えてください。

■index.php

1 <html>
2 <head>
3 <title>form</title>
4
5 <script type="http://code.googleapis.com/jquery-1.10.1.min.js"></script>
6
7 <script type="text/javascript">
8 $(function(){
9 $("button").click(function () {
10 $("p").show("slow");
11 });
12 }
13 </script>
14
15 </head>
16 <body>
17 <button>Show it</button>
18 <p style="display: none">Hello</p>
19 <p>本の種類</p>
20 <p>
21 <form name="form1" method="post" action="./Class/Product.php">
22 <input type="text" name="book">
23 </p>
24 <select name="select">
25 <option>選択してください</option>
26 <option value="tech">技術書</option>
27 <option value="comic">まんが</option>
28 <option value="magazine">雑誌</option>
29 </select>
30 </p>
31 <input type="submit" name="Submit" value="submit">
32 </form>
33 </p>
34 </body>
35 </html>

行動規範の内容に同意します

回答2件

カッコが抜けてる。そして、表示させたい項目書くのそこじゃない。そして、スクリプトへのリンクは src、そして、htmlの構造が、、、行末に入ってる大量のスペースとか、丸めて屑籠に捨てたくなってきた。
JavaScript(jQueryしかり)整形文じゃないと動かんと思ってて。
ブラウザに、ぐちゃぐちゃ文書補完する機能あるけれど、使うなら理解してとことん使いこなしてほしい。
文書に関係ないshow/hideするだけために設けられた p とか言語道断。<p></p> = 段落

show.js

lang
1jQuery(function(){ 
2  jQuery( 'button' ).click(function () { 
3    jQuery( 'p' ).show( 'slow' ); 
4  }); 
5}**);**
6
7jQuery( function() {
8  jQuery( 'p' ).hide();
9});
10

show.js

lang
1**<!DOCTYPE html>**
2<html>
3  <head>
4    <title>form</title> 
5    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6  </head>
7  <body>
8    <button>Show it</button>
9    <p>Hello</p> 
10    <p>本の種類</p>
11      <form method="POST" action="./Class/Product.php"> 
12        **<fieldset>**
13          **<legend>本の種類</legend>**        
14          <p><input type="text" name="book"></p>
15          <p>
16            <select name="select">
17              <option value="non" selected="selected">選択してください</option>
18              <option value="tech">技術書</option>
19              <option value="comic">まんが</option>
20              <option value="magazine">雑誌</option>
21            </select> 
22          </p>             
23          <p><input type="submit" name="Submit" value="submit"></p>
24         </fieldset>
25       </form>
26       **<script type="text/javascript" src="show.js"></script>**
27    </body>                                                       
28</html>

投稿2015/03/22 08:13

編集2015/03/22 08:14

miya

総合スコア81

ベストアンサー

下記URLが404でした、
URLをただしい物に置換すれば動くのでは？

lang
1 <script type="http://code.googleapis.com/jquery-1.10.1.min.js"></script>

https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js とか

投稿2015/03/22 07:44

bigfatrat

総合スコア187

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！