引き続きjQueryの勉強を実施。前回の「jQueryで要素を移動する」で使った『.append()』メソッドに似ている『.appendTo()』メソッドはhtmlに記述していない要素を追加表示できることを知ったので実装。
（『.append()』メソッドでも追加表示できますが、今回は新しいメソッド使用してます。）
ページを表示したときにidで指定した個所に要素を追加表示するものに仕上げたのと、ボタンをクリックした時に投票コメントを入れられるものに仕上げたので備忘録。
htmlで直接書いてもできるけど、htmlだと長くなるからjQueryでシンプルにしてしまおうな気持ちのとき、入力は面倒だから簡単にコメント入れられるようにする何かが欲しいときに使えそうです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.ページを表示したときにidを指定した個所に要素を追加表示する。
↓
STEP2.ボタンをクリックしたときに要素を追加表示する。（←今回はコメント文の投票）
STEP1-1. 画面を作成する
まずは追加表示する画像以外の部分をつくっていきます。
追加表示させる画像の部分はdivにidを指定するだけ。
画面内の装飾で気になった個所にcss入れていますが、必要な個所は上記の部分だけです。
（今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。）
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
h1{
font-weight:bold;
font-size:32px;
margin:0 0 20px 20px;
border-left:15px solid #E91E63;
}
#cimg,p,select{
margin-left:20px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<h1>「要素を新しく作って追加表示する」のサンプルサイト</h1>
<div id="cimg"></div>
<br>
<p>これはダミーテキストです。今回は要素を新しく作って追加表示する内容です。どうぞー。どうでしょ？<br>
お役に立てれば幸いですー。</p>
<div>
<p>「いい写真だねー！！」と投票する。
<button>投票</button><hr></p>
</div>
</div>
</div>
ここまでだと、以下の画像みたいに画像が表示されていない状態になっていると思います。↓
続いて、jQueryを記述するファイルを作っていきます。jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. ページを表示したときにidを指定した個所に要素を追加表示する
jQueryでページを表示したときに要素を追加表示させます。
ここで『.appendTo()』メソッドを使っていきます。
以下の内容を「sample.js」に記述します。
//新しく要素を追加する
$(function(){
var cimg = $('#cimg');
$('<img src="./img/flower.jpg">').appendTo(cimg);
});
どうですか？
以下の画像みたいに画像が表示されていたらOKです。
※画像が表示されない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. クリック時の動作範囲にidを指定する
STEP1-1で記述したコメント投票部分とボタンにidを指定していきます。
div要素に名前をつけただけですが、以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
h1{
font-weight:bold;
font-size:32px;
margin:0 0 20px 20px;
border-left:15px solid #E91E63;
}
#cimg,p,select{
margin-left:20px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<h1>「要素を新しく作って追加表示する」のサンプルサイト</h1>
<div id="cimg"></div>
<br>
<p>これはダミーテキストです。今回は要素を新しく作って追加表示する内容です。どうぞー。どうでしょ？<br>
お役に立てれば幸いですー。</p>
<div id=”tohyo”>
<p>「いい写真だねー！！」と投票する。
<button id="t-b">投票</button><hr></p>
</div>
</div>
</div>
STEP2-2. ボタンをクリックしたときに要素を追加表示する
jQueryで「投票」ボタンをクリックしたときにコメント文の要素を追加表示していきます。
『.appendTo()』メソッドにくわえて『.click()』メソッドを使っていきます。
以下の内容を「sample.js」に記述します。
//ボタンクリック時に追加する
$(function(){
var tohyo = $('#tohyo');
$('#t-b').click(function(){
$('<p>いい写真だねー！！</p>').appendTo(tohyo);
});
});
どうですか？
以下の画像みたいにボタンをクリック時にコメント文が追加が表示されていたらOKです。
※画像が表示されない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
