質問: jQueryの繰り返し処理について質問です。 フォームを部分的にリセットしたくて、 以下のようなjQueryを追加しました。 ``` ラジオ1 ラジオ2 入力内容をクリア チェックボックス1 チェックボックス2 入力内容をクリア ・ ・ ・ ``` ``` $(function () { $('#form1_reset').click( function() { $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); return false; }); $('#form2_reset').click( function() { $('#form2').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); return false; }); $('#form3_reset').click( function() { $('#form3').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); return false; }); ・ ・ ・ ・ }); ``` form1_resetをクリックすると、 form1内のフォームがリセット、 form2_resetをクリックすると、 form2内のフォームがリセットされるという感じです。 これをform10まで書いています。 連番が変わっていくだけなので繰り返し処理で できそうな気がするのですが、いかんせん初心者でわかりませんでした。 上記をもっとスマートに書くとしたら、どのようにすれば良いでしょうか? アドバイスいただけると幸いです。 よろしくお願いいたします。
回答: こんにちは 全体が``のフォームですので、その中にある、各 `#form1`, `#form2` のことを、この回答ではサブフォームと呼びます。 基本的な考え方としては、ご質問にある、サブフォーム1個だけをクリアする下記のコード ``` $('#form1_reset').click( function() { $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); return false; }); ``` を、どのサブフォームのクリアボタンをクリックしたときも意図した動作をするように修正していけばよいかと思います。その際に、HTMLのほうもより良い形にしていく作業が発生するかもしれませんが、このご質問では、HTMLのほうの組み方(要素の階層構造)やidのフォーマット等を変更しなくてもjavascriptのコード修正のみで(とりあえずは)済ませることができるので、その修正手順を示します。 上記の サブフォーム`#form1` をリセットするコードを以下のように修正します。 **(1) リセットボタンのセレクタを、どのリセットボタンにも該当するように修正** 修正前: ``` #form1_reset ``` 修正後: ``` [id$="_reset"] ``` **(2) クリアすべきサブフォームのidを(1)に該当したボタンのidから取得** リセットボタンのクリックハンドラの冒頭に以下を追加します。 追加: ``` const formId = $(this).attr('id').replace('_reset', ''); ``` 上記によって、 `formId` には `'form1'`, `'form2'` などの文字列が入ってくる想定です。 **(3) クリア対象のサブフォームの特定に、(2)で得られた`formId` を使うように修正** 修正前: ``` $('#form1').find(... ``` 修正後: ``` $(`#${formId}`).find(... ``` 上記3点の変更をまとめて書くと、以下のようになります。 ``` - $('#form1_reset').click( function() { + $('[id$="_reset"]').click( function() { + const formId = $(this).attr('id').replace('_reset', ''); - $('#form1').find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); + $(`#${formId}`).find('textarea, :text, select, radio, checkbox').val('').end().find(':checked').prop('checked', false); return false; }); ``` * **動作確認用CodePen:** ※3つ目のサブフォームを加えています。 上記によってとりあえず、JavaScriptの修正だけで済ませることはできますが、HTMLについて * 入力要素だけではなくリセットボタンも包含したくくりをサブフォームとするように、HTMLの階層を修正する。 * id ではなく class を使う。 といった改善の余地があり、これらの改善に合わせてjavascriptのコードのほうも見通しが良くなっていくと思います。 以上、参考になれば幸いです。 ### 補足 上記に回答した修正後のコードによって、サブフォームが何個あっても対応できます。以下はサブフォームが30個ある例です。 * **サブフォームが30個ある場合:**