質問: input_valu1+','+input_valu2+','+input_valu3; $('#result_valu').val(output_valus); }); ``` 質問をまとめます。 質問➀:機能Aについて、実際は大量のinputがあるので、このままではif条件が大量になってしまいます。シンプルな書き方を知りたいです。 質問➁:機能Bについて、実際は大量のinputがあるので、このままではvarでの定義が大量になってしまいます。シンプルな書き方を知りたいです。 質問➂:機能Bについて、「値2つにつきカンマを1つ」にして、そしてカンマが連続する場合は「submit」をdisabledにしたいです。 (例えば、[りんご,,なす,,]と[3,,2,,]などを、[りんご,,なす]と[3,,2]のように最後にカンマが一切入らないようにして、さらに[りんご,きゅうり,なす]と[3,4,2]のように修正されるまで、「submit」をdisabledにしたいです。) ### 試したこと 上のソースコードのように、1つずつ書いていくところまでしか試せませんでした。
回答: こんにちは。 様々な修正方法や手順があると思いますので、あくまでその一例ということで、以下、回答します。なお、 * JSだけではなく、HTMLとCSSもリファクタしました。 * ファイル名を `index.html`, `style.css`, `index.js` としました。 * 動作確認のため、送信エリアの `` の幅を広げました。 #### index.html ``` Q155041 【入力エリア】 add data remove data 【送信エリア】 ``` #### style.css ``` p { margin: 0px; } section { border: 1px solid gray; margin: 15px 0 0 0; padding: 10px; } .data-list .data { display: flex; } .data-list .data input { width: 50px; margin: 10px 2px; } .output-list input { width: 95%; } ``` #### index.js ``` $(function(){ /* 【入力エリア】を【送信エリア】にコピー */ const updateResult = function(clazz) { const values = $(`.${clazz}`).toArray().map(e => e.value); $(`#result-${clazz}`).val(values.join(',')); }; const inputData = function() { updateResult($(this).attr('class')); }; $('.data input').on('keyup change', inputData); /* ボタンクリックで【入力エリア】の追加と削除 */ $('#add').click(function(){ // 一行目をクローン const newData = $('.data:first-of-type').clone(); // input の値を初期化し、イベントハンドラ設定 $('input', newData) .val('') .on('keyup change', inputData); // data-table に追加 $('.data-table').append(newData); }); $('#remove').click(function(){ // データ行が2行以上あれば最後の行を削除し、送信エリアを更新 if ($('.data').length > 1) { $('.data:last-child').remove(); ['name', 'valu'].forEach(clazz => updateResult(clazz)); } }); }); ``` 上記のコードを、以下の2カ所に上げていますので、ご参照ください。 ・ **jsfiddle:** ・ **GitHub:** GitHubのほうで、initial commit では、ご質問に挙げられているコードをほぼそのまま写しただけなので、git clone するなりして頂き、全コミット を追っていけば、どんな修正をしていったかが分かるかと思います。 以上、参考になれば幸いです。 #### 追記 ご質問に挙げられているソースコードのコメントに > > 質問➂:これではカンマが多くなってしまいます。「値2つにつきカンマを1つ」にしたいです。 > > > とありましたが、 > > 「値2つにつきカンマを1つ」にしたい > > > というのは、`` および`` の `value` を、 `class` が`"name"`のものと`"valu"`のものとで分けて、カンマ区切りで並べたい、という意味と解釈して、そのように表示するようなコードを回答しています。 もし、回答に書いたコードが、上記の3含めて、parinpurin23さんがご要望の動作と違うものになっていましたら、コメントからお知らせください。 #### 追記2 上記の回答に記載したコードから、コメントから頂きました、 > > parinpurin23 2018/10/30 12:05 > > ただし、次の2つの場合について > > ・文字の最後に連続で入ってしまとき > > →その最後のカンマを全て削除。 > > ・途中のカンマが連続するとき > > →送信ボタン(急きょ追加)をdisabledにする。 > > というイメージでした。 > > > に対応する修正の一例としては、関数`updateResult` を以下のようにします。 ``` const updateResult = function(clazz) { // 指定されたクラスの input.value をカンマ区切りにした文字列を作成 let csv = $(`.${clazz}`).toArray().map(e => e.value).join(','); // 末尾にカンマが1個以上あるとき、これを削除 csv = csv.replace(/,+$/, ''); // 上記で作成されたカンマ区切りの文字列をvalueに設定し、あわせて連続したカンマがあるかどうかでdisabledを設定 $(`#result-${clazz}`) .val(csv) .prop('disabled', /,,/.test(csv)); }; ``` GitHub のほうも上記の修正のための、以下の2コミットをプッシュしておきました。 ・ 末尾にカンマが1個以上あるとき、これを削除 ・ 連続したカンマを含む場合の対応 後者のコミットでは、 disabled になったことが見て分かるように、 disabled の場合の背景色を `#aaa` にしました。 #### 追記3 以下にて、disabled にする対象をsubmitボタンにするのと、先頭のカンマも削除するようにしました。 ・submitボタンを追加し disabledにする対象を修正 ・先頭のカンマも削除 git clone しているのでしたら、 pull してご確認ください。