【初心者】jQuery attrメソッド／セレクトボックス／エラーメッセージ／カスタムデータ属性【備忘録２１】

11/30～12/2に勉強したこと

要素の値取得

今までにjQueryで学んだ「text / html / css」などに関しては
$('#title').text();　と書くことで呼び出すことができる。
上記の場合はid名のテキストを取得することができる。

attrメソッド

-　attr('id','title')のように第一引数と第二引数を書くことによってセットが可能となる。
この場合は属性名がidで、そこに属性値のtitleがセットされる。
-　第二引数を指定しなければ、値を取得することができる。

【例】id名／リンクのURLを表記させたい場合。

<!-- html -->
...
<div class="section-content">
  <p id ="content">説明文章</p>
  <a href="http://~~" id="link">詳しく</a>
</div>

<div class="output-wrapper">
 <div class="output-inner">
  <p class="output-item">タイトル：<span id="title-text"></span></p>
  <p class="output-item">文章のid：<span id="content-id"></span></p>
  <p class="output-item">リンクURL：<span id="link-href"></span></p>
 </div>
</div>

//js
...
var id=$('.section-content p').attr('id');
var href=$('#link').attr('href');

$('#content-id').text(id);
$('#link-href').text(href);

【気をつけること】
-　.attrの()の中で、['']を抜かしてしまうので気を付ける！
-　逆に、.text()の中にて、変数名なのに['']で囲ってしまうことがあったので注意！

inputタグの入力値を取得する書き方

inputタグにて入力された値を取得するにはvalを使用する。
【例】

<!-- html -->
<form>
 <div>名前：</div>
 <input id="name" type="text">
</form>

//js
var name=$('#name').val();
//入力された値がnameに代入される。

submitイベント

送信ボタン・Enterキーを押された際にイベントが発生する書き方。
これらを使って、下記の例を書き進めていく。
【例】フォームに入力された値を結果として表示させる。
-　入力するtextareaのid「text-form」
-　入力フォーム全体のid「form」
-　結果を表示する箇所のid「output-text」

$('#form').submit(function(){
 var textValue = $('#text-form').val();
 $('#output-text').text(textValue);
});

まず、submitでイベントを作成し、変数にフォーム入力したものを代入。
そのあと、書き出したい箇所に置き換えをする。

セレクトボックスの入力値反映

セレクトボックスにて選択された値を、結果として表示させる場合。
【例】

<!-- html -->
...
<select id="select-form" class="select-form">
  <option value="0">選択してください</option>
  <option value="1">１：犬</option>
  <option value="2">２：猫</option>
  <option value="3">３：羊</option>
</select>
...
<div class="output-wrapper">
  <p class="output-item">好きな動物<span id="output-select"></span></p>
</div>

//js
var selectValue = $('#select-form').val();
$('#output-select').text(selectValue);

フォームの入力チェック（エラーメッセージ）

表示分けには、ifとelseで空欄時とそうでない時を条件分岐する必要がある。
空欄時には「''」で記す。これを「空文字列」という。

【例】文章入力欄に何も入力しなかったときにエラーメッセージを出す。
-　文章入力欄に反映される変数を「textValue」
-　エラー表示する＜ｐ＞のidを「error-message」

...
if(textValue===''){
 $('#error-message').text('入力してください');
 }else{
 $('#error-message').text('');
 }

入力欄にて、自動入力

ここでは「option-btn」というクラス(ボタン)をそれぞれの選択肢に
付けて、それがクリックされたときに、入力欄へ自動反映されるように書いていく。
（「◎◎が好きな理由は、」という文章を自動入力されるようにしておく。）

※前に学んだval();の引数部分に値を入力することで入力欄にセットされるようになる。

• 選択肢のそれぞれのボタンのクラス名は「option-btn」
• 入力欄のidを「text-form」

//js
$('.option-btn').click(function(){
  var optionText = $(this).text();
 //↑クリックした選択肢のテキストが取得されるようにしておく。
  $('#text-form').val(optionText + 'が好きな理由は、');

【気を付けること】
val()ではなく、書き換えとごっちゃになりtext()を一度使用してしまった。
入力欄への自動入力はval(---)でしっかり覚えておく。

カスタムデータ属性

「data-」から始まる属性名を自由に設定ができる。
hrefやsrcなどと同様に使用可能。

【例】
「option-btn」というクラス(ボタン)をそれぞれの選択肢に付けて
それがクリックされたときに、セレクト欄へ自動反映されるように書いていく。

• 選択肢のそれぞれのボタンの属性名は「data-option」
• セレクト欄のidを「select-form」

$('.option-btn').click(function(){
  var clickedOption = $(this).attr('data-option');
  //クリックされたそれぞれの属性を取得するようにしておく。
  $('#select-form').val(clickedOption);
  //先ほどの変数がセレクト欄に入るように書く。
});