jQueryの勉強を引き続き実施。今回はテキストの内容を書き換えるコードを書いてみて実装。
ページを表示したときにテキストの内容を書き換えるだけでなく、もう少し動きのあるものということでボタンをクリックした時にプルダウンから選択内容へ書き換えるものに仕上げたので備忘録。
今回は、システム設定的な部分を想定で作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
※本文では画像を使用しています。450px×220pxぐらいのものを準備してください。
★応用していくときの流れ
STEP1. ページを開いたときにカテゴリー名を指定して表示する。
↓
STEP2. ボタンをクリックしたときに、選択したカテゴリー名で表示する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内にカテゴリー、画像、文章をそれぞれ２つ作ります。
そして、カテゴリーに対してidを指定します。
今回はカテゴリー1に「id=’c_1’」、カテゴリー２に「id=’c_2’」を指定しています。
以下、htmlファイルの中身です。↓
・・・・・省略・・・・・ <div class="container"> <div class="row"> <div class="col-md-12"> <div id="c_1" class="alert alert-danger" role="alert">カテゴリー１</div> </div> </div> <div class="row"> <div class="col-md-6"> <img src="./img/jq7_1.png" alt="" class="img-responsive"> </div> <div class="col-md-6"> <p>こんにちは。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。..........<br> </p> </div> </div> <br> <div class="row"> <div class="col-md-12"> <div id="c_2" class="alert alert-info" role="alert">カテゴリー２</div> </div> </div> <div class="row"> <div class="col-md-6"> <img src="./img/jq7_2.png" alt="" class="img-responsive"> </div> <div class="col-md-6"> <p>こんにちは。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。どうぞダミーテキストです。<br> ちょっとダミーテキストを入力します。..........<br> </p> </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でページを開いたときにカテゴリー名を指定して表示する
まずはjQueryでページを開いたときにカテゴリー名を指定して表示してみます。
テキストの内容を書き換えるので『.text()』メソッドを使用します。
カテゴリー１を「お知らせ」、カテゴリー２を「NEWS」に書き換えます。
以下の内容を「sample.js」に記述します。
//カテゴリー名を指定する
$(function(){
$('#c_1').text('お知らせ');
$('#c_2').text('NEWS');
});
どうですか？
以下の画像みたいにカテゴリー名が書き換わって表示されたらOKです。
※ページを開いたときにカテゴリー名が書き換わっていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイルにプルダウンとボタンを追加する
カテゴリー名を指定したテキスト内容で表示できるようになったら、
次は、jQueryでボタンをクリックしたときに選択したカテゴリー名で表示してみます。
今回はプルダウンから選択した内容をカテゴリーに表示します。
まずは、htmlファイル内にプルダウンとボタンを追加します。以下を文章のpタグ下に記述します。
以下、htmlファイルの中身です。↓
ちょっとダミーテキストを入力します。..........<br> </p> ・・・・・省略・・・・・ <select name="cat_name" style="padding: 6px 12px;"> <option value="noselect">・・・・・</option> <option value="osirase">お知らせ</option> <option value="news">最新ニュース</option> <option value="pickup">PICK UP!</option> </select> <button type="button" class="btn btn-danger">カテゴリープレビュー</button> ・・・・・省略・・・・・ ちょっとダミーテキストを入力します。..........<br> </p> ・・・・・省略・・・・・ <select name="cat_name" style="padding: 6px 12px;"> <option value="noselect">・・・・・</option> <option value="osirase">お知らせ</option> <option value="news">最新ニュース</option> <option value="pickup">PICK UP!</option> </select> <button type="button" class="btn btn-primary">カテゴリープレビュー</button>
どうでしょうか。
以下の画像のようにプルダウンとボタンが追加できたらOKです。
STEP2-2. jQueryでボタンをクリックしたときに、選択したカテゴリー名で表示する
続いてボタンに動きをつけていきます。
２つの「カテゴリープレビュー」ボタンは『クリック』されたときに動きをするので、『.click()』メソッドを使用します。また、動きのポイントとなるボタンにそれぞれidを指定します。
赤の「カテゴリープレビュー」ボタンには「cbtn_1」、青の「カテゴリープレビュー」ボタンには「cbtn_2」というidを指定します。
そして、「指定したボタン（id）がクリックされたときに、プルダウンで選択しているテキスト内容をカテゴリーに表示する」ようにします。
STEP1-2での記述した内容の下に追記してください。以下、jsファイルの中身です。↓
//クリック時にカテゴリー名を書き換える
$(function(){
$('#cbtn_1').click(function(){
var cai1 = $('#pull_1 option:selected').val();
$('#c_1').text(cai1);
});
$('#cbtn_2').click(function(){
var cai2 = $('#pull_2 option:selected').val();
$('#c_2').text(cai2);
});
});
どうですか？
以下の画像みたいにプルダウンから選択してボタンをクリックしたときに、カテゴリー名称が変わったらOKです。
※ボタンをクリックしたとき表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
