Q&A
tag に代入する文字列に、phpにて生成した文字列も含んでいるようですが、それはそれでOKなんですかね？ 条件によって変化させなきゃいけない、その条件はページを読み込んだ時点のもので固定されてしまいますが。
前提・実現したいこと
PHP(codeigniter)で商品の見積もり画面を作っています。
####仕様とできてること
・見積ページ
・商品名、単価、値段を入力する欄がある
・商品一覧はjsonファイルに格納されたものがデフォルトでページに表示されている
・商品名、単価、値段を変更して見積もりを作ることができる
・商品名はjsonファイルに格納されたデータからプルダウンで選択or自由入力できるようになっている（datalist）
・個数はデフォルトで１個と設定
・商品項目は追加ボタンで増やせる（削除ボタンもあるがコードが増えるので省略）
####やりたいこと
・商品項目追加（追加ボタンクリック）後に商品名をプルダウンから選択するとjsonファイルから商品名に紐付いた料金を取り出して表示
発生している問題・エラーメッセージ
商品項目追加後に商品名をプルダウンから選択するとjsonファイルから商品名に紐付いた料金を取り出して表示することができるが、２個目以降の処理で追加項目料金が新たに選択された商品の料金に上書きされてしまう。
該当のソースコード
php
1<span id='es_area'> 2 <?php foreach ($this->data['select_ops']['estimate_co'] as $key => $estimate_co) : ?> 3 <div class="row estimate_co"> 4 <div class="col"> 5 <input type="text" id="item_name" name="item_name[]" list="item_name_list" value="<?php echo $estimate_co['name']; ?>" required> 6 <datalist id="item_name_list"> 7 <?php foreach ($this->data['select_ops']['estimate_co'] as $key => $value) : ?> 8 <option value="<?php echo $value['name']; ?>"> 9 <?php endforeach; ?> 10 </datalist> 11 </div> 12 <div class="col"> 13 <input type="text" id="price" name="price[]" placeholder="単価" value="<?php echo $estimate_co['price']; ?>"> 14 </div> 15 <div class="col"> 16 <input type="text" id="quantity" name="quantity[]" placeholder="個数" value="1"> 17 </div> 18 </div> 19 <?php endforeach; ?> 20</span> 21 22<span id="chase_2"></span> 23<div class="row"> 24 <div class="input-group"> 25 <button type="button" id="plus">追加</button> 26 </div> 27</div>
php
1<script> 2 $(function() { 3 $('#plus').on('click', function() { 4 tag = '<div class="row form-group"><div class="col"><input class="col-xs-2 form-control" type="text" id="item_name" name="item_name[]" list="item_name_list" value="" required><datalist id="item_name_list"><?php foreach ($this->data['select_ops']['estimate_co'] as $k => $value) : ?><option value="<?php echo $value['name']; ?>"><?php endforeach; ?></datalist></div><div class="col estimate_plus"><input type="text" id="price" name="price[]" value=""></div><div class="col"><input type="text" id="quantity" name="quantity[]" value="1"></div></div>'; 5 $('#es_area').append(tag); 6 }); 7 8 $(document).on('change', '#item_name', function () { 9 let val = $(this).val(); 10 let select_price = 0; 11 let list = <?php echo json_encode($this->data['select_ops']['estimate_co']); ?>; 12 $.each(list, function(key, value) { 13 if(value.name == val){ 14 let select_price = value.price; 15 $('.estimate_plus').children('input').val(select_price); 16 } 17 }); 18 }); 19}); 20</script>
json
1"estimate_co": { 2 "1": { 3 "name": "商品１", 4 "price": 1000 5 }, 6 "2": { 7 "name": "商品２", 8 "price": 2000 9 } 10 ... 11}
試したこと1
追加された項目列だけ毎回違うクラス名orID名にしたらいいと思い.on('change')の最初の処理にクラス名を変更する処理を追加したが、ダメだった。
consoleで見ると
console.log(class_name);
=> col-xs-2 form-control1
このようにクラス名の後ろに数字が追加されるが、
Elements
だとクラス名が変更されていないためだと思われる。
試したこと2
追加ボタンの際にクラス名を変更
php
1<script> 2$('#plus').on('click', function() { 3 let class_name = 1; 4 tag = '<div class="row estimate_co'+ class_name +'"><div class="col">'略; 5 $('#es_area').append(tag); 6 });
この場合、Elementsでクラス名が変更されたことが確認できるが、.on('change')に指示を飛ばす際のクラス名の受け取り方がわからない。
と、２個目以降の追加列も同じクラス名になってしまう。（毎回数字が増えるようにしたい）
前提から間違っていたり、もっと良い書き方、考え方があればそういったアドバイスでもいいので意見をいただきたいです。
回答1件
0
$('.estimate_plus')は配列で返るので行追加すると増えているはずなので追加した行をlast()などで指定すれば？
ただ、再編集などを考えると選択中のClassを設定するなどしても良いかもしれません
投稿2021/05/18 08:26
編集2021/05/18 08:28
総合スコア189
そうですね。
一度.children('input')の部分を.children('input:last')としたら常に最新のtagだけは正常に表示されるようになったのですが、おっしゃる通り再編集の際に上書きされてしまうので、それぞれにユニークなclassが振り分けられるようにしたいと考えています。
そのやり方がわからず困っているので、なにか書き方の案などあれば教えていただきたいです。
例えば、class="'esp'+$('.estimate_plus').length()"とかでしょうか？
classでなくても、例えばrelとかdataを設定してもいいのではないかと
あなたの回答
tips
プレビュー
