jQueryの勉強を引き続き実施。今回はある要素のデータを消してしまうプログラムコードを書いてみて実装。
ページを表示したときにはデータを全部消しておいて、ボタンをクリックした時にhtmlでデータを表示させます。そして、表示したデータでいらないものはボタンで消していくものに仕上げたので備忘録。
今回はTODOリストを表示し、完了したものは消していくイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
★応用していくときの流れ
STEP1.ページを開いたときにTODOリストは空で表示する。
↓
STEP2.ボタンをクリックしたときに、指定のTODOリストを消す。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内にTODOリストを作ります。
TODOリストはdivタブでまるっと表示範囲を指定します。そしてdivタブ内にpタブを作成し、それぞれにclassを付与しておきます。
また、今回のタイトルやボタン、リスト文についてはcssで装飾しています。今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande',
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;
}
h2{
padding: 10px;
border-left: solid 15px #0033ff;
border-bottom: dashed 3px #0033ff;
font-weight: bold;
}
h2 .p-btn{
font-weight:normal;
border: solid 2px #d3d1d1;
font-size: 50%;
padding: 5px;
position: absolute;
}
h2 .p-btn:focus{
outline: none;
}
.btn-s{
width: 32px;
height: 32px;
border-radius: 50%;
background: #d3d1d1;
border: solid 2px #d3d1d1;
}
.btn-s:focus{
outline: none;
} </style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>ToDoリスト <button>リスト表示</button></h2>
<br>
<div id="dolist">
<p class="list1"><button id="d-btn1" class="btn-s">×</button> 株式会社●●商事に電話する。（XXXX年XX月XX日、商談の件）</p>
<p class="list2"><button id="d-btn2" class="btn-s">×</button> 株式会社▲▲工事へ資料送付する。（XXXX年XX月XX日、問い合わせの件）</p>
<p class="list3"><button id="d-btn3" class="btn-s">×</button> ■■さんに電話する。（XXXX年XX月XX日、■■案件の件）</p>
<p class="list4"><button id="d-btn4" class="btn-s">×</button> 営業会議に出席。（XXXX年XX月XX日 XX：XX）</p>
<p class="list5"><button id="d-btn5" class="btn-s">×</button> 株式会社●●病院案件の提案資料を作成する。（XXXX年XX月XX日までに）</p>
</div>
</div>
</div>
</div>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、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. jQueryでページを開いたときにTODOリストは空で表示する
まずはjQueryでページを開いたときにTODOリストを空で表示してみます。
空で表示する、データは空っぽの状態で表示するので『.empty()』メソッドを使用します。
STEP1-1で作っておいたTODOリストのdivタブの中身を空っぽで表示します。
以下の内容を「sample.js」に記述します。
//ページを表示したときTODOリストを表示しない。
$(function(){
$('#dolist').empty();
});
どうですか？
以下の画像みたいにTODOリストが無い状態で表示されたらOKです。
※ページを開いたときにフォームが表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1.TODOリストを表示するボタンを作る
画面を表示したとき、TODOリストを空の状態で表示できるようになったら、
次は、jQueryでボタンをクリックしたときにTODOリストを表示し、×ボタンで消していきます。
まずは、タイトル「TODOリスト」の横に表示している「リスト表示」ボタンに『class=”p-btn”』を指定します。
指定のTODOリストを削除については次項でまとめて説明します。
STEP2-2. jQueryでボタンをクリックしたときに、指定のTODOリストを消す
続いて「リスト表示」ボタンをクリックしたらTODOリストを表示と、指定のTODOリストの行を削除する部分を実装します。
まずは「リスト表示」ボタンをクリックした時の動作は『クリック』されたときに動きをするので、『.click()』メソッドを使用します。ここでは「指定したボタン（id）がクリックされたときに、divタブのid「dolist」の部分にTODOリストを表示」します。
続いて指定のTODOリストの表を削除するため、TODOリストの「×」ボタンをクリックしたときの動作にも『.click()』メソッドを使用します。ここでは「指定したボタン（id）がクリックされたときに、pタブの中身を削除」します。
STEP1-2での記述したプログラムコードの下に追記してください。以下、jsファイルの内容です。↓
//×ボタンをクリックしたときTODOリストを表示する。
$(function(){
$('.p-btn').click(function(){
$('#dolist').html('<p class="list1"><button id="d-btn1" class="btn-s">×</button> 株式会社●●商事に電話する。（XXXX年XX月XX日、商談の件）</p><p class="list2"><button id="d-btn2" class="btn-s">×</button> 株式会社▲▲工事へ資料送付する。（XXXX年XX月XX日、問い合わせの件）</p><p class="list3"><button id="d-btn3" class="btn-s">×</button> ■■さんに電話する。（XXXX年XX月XX日、■■案件の件）</p><p class="list4"><button id="d-btn4" class="btn-s">×</button> 営業会議に出席。（XXXX年XX月XX日 XX：XX）</p><p class="list5"><button id="d-btn5" class="btn-s">×</button> 株式会社●●病院案件の提案資料を作成する。（XXXX年XX月XX日までに）</p>');
$('#d-btn1').click(function(){
$('.list1').empty();
});
$('#d-btn2').click(function(){
$('.list2').empty();
});
$('#d-btn3').click(function(){
$('.list3').empty();
});
$('#d-btn4').click(function(){
$('.list4').empty();
});
$('#d-btn5').click(function(){
$('.list5').empty();
});
});
});
どうですか？
以下の画像みたいに「リスト表示」ボタンをクリックしたときにTODOリストを表示、「×」ボタンをクリックしたときにTODOリストの「×」ボタンをクリックした行が削除されたらOKです。
※ボタンをクリックしたとき表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
