yureighost score 2169
2020/01/27 17:17 投稿
| 他の方の回答も取り入れて修正してみましたが、 |
| 先に断っておくとこの修正は追加、削除ともどのボタンを押しても末尾が変更されます。 |
| 中間の要素を変更すると難易度が跳ね上がるからです。 |
| 統合版のscriptとbody部分に修正を入れています。 |
| ~~統合版のscriptとbody部分に修正を入れています。~~ |
| HTMLの全ソースを貼っておきます。 |
| ```HTML |
| ・・・ |
| <!doctype html> |
| <html lang="ja"> |
| <head> |
| <meta charset="utf-8"> |
| <title></title> |
| <!--tagit--> |
| <script src="https://code.jquery.com/jquery-1.9.1.js"></script> |
| <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"> |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> |
| <link rel="stylesheet" type="text/css" href="tagit/css/jquery.tagit.css"> |
| <script type="text/javascript" src="tagit/js/tag-it.min.js"></script> |
| <script type="text/javascript"> |
| var template; |
| var addKarikamokuTagit = function(idx) { |
| var tagList = ['現金','現金過不足','当座預金','普通預金','定期預金','その他預金']; |
| $('input[name="karikamoku' + idx + '"]').tagit({ |
| removeConfirmation: true, |
| availableTags: tagList, |
| fieldName: "karikamoku" + idx, |
| tagLimit:1 |
| }); |
| }; |
| var addTorihkisakiTagit = function(idx) { |
| var tagList = ['売掛金','未収賃貸料','有価証券','商品','棚卸資産','前払金','仮払金']; |
| $('input[name="torihkisaki' + idx + '"]').tagit({ |
| removeConfirmation: true, |
| availableTags: tagList, |
| fieldName: "torihkisaki" + idx, |
| tagLimit:1 |
| }); |
| }; |
| $(function() { |
| template = $('.input_plural').clone(true); |
| addKarikamokuTagit(1); |
| addTorihkisakiTagit(1); |
| }); |
| $(document).on("click", ".add", function() { |
| var clone = template.clone(true); |
| var addIndex = $('.input_plural').length + 1; |
| clone.children(".karikamokuTags").attr('name', 'karikamoku' + addIndex); |
| clone.children(".torihkisakiTags").attr('name', 'torihkisaki' + addIndex); |
| $('.input_plural').last().after(clone); |
| addKarikamokuTagit(addIndex); |
| addTorihkisakiTagit(addIndex); |
| }); |
| $(document).on("click", ".del", function() { |
| var target = $(this).parent(); |
| if ($('.input_plural').length > 1) { |
| $('.input_plural').last().remove(); |
| } |
| }); |
| </script> |
| ・・・ |
| <style type="text/css"> |
| <!-- |
| #input_plural { |
| margin: 10px 0; |
| } |
| #input_plural input.form-control1 { |
| display: inline-block; |
| width: 40%; |
| height: 34px; |
| padding: 6px 12px; |
| font-size: 14px; |
| color: #555; |
| } |
| #input_plural input.form-control2 { |
| display: inline-block; |
| width: 40%; |
| height: 34px; |
| padding: 6px 12px; |
| font-size: 14px; |
| color: #555; |
| } |
| #input_plural input.pluralBtn { |
| width: 30px; |
| height: 30px; |
| border: 1px solid #ccc; |
| background: #fff; |
| border-radius: 5px; |
| padding: 0; |
| margin: 0; |
| } |
| --> |
| </style> |
| </head> |
| <body> |
| <form> |
| <div id="input_pluralBox"> |
| <div class="input_plural"> |
| <input type="text" value="" name="karikamoku1" class="karikamokuTags"> |
| <input type="text" value="" name="torihkisaki1" class="torihkisakiTags"> |
| <input type="button" value="＋" class="add pluralBtn"> |
| <input type="button" value="－" class="del pluralBtn"> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
| ``` |
| 処理のおおまかな説明ですが、.tagit部分のfieldName:部分に設定する名前は一意でないといけません。 |
| 不具合動作で報告されている下のテキストフィールドのタグを消すと上のが消えるのは、 |
| テキストフィールドのnameが同一のため区別が付かず上の要素が優先で処理されて下の要素が無視されているからでしょう。 |
| そのため私の修正ではinput_pluralの要素数に合わせて数値を割り当てる処理を追加し、 |
| テキストフィールドのnameと.tagitのfieldName:に設定しています。 |
| ここで最初に言及している話になりますが、中間の要素を変更をしようとすると、 |
| 中間の要素のnameの数値が大きくなったり欠番の危険性が出ます。 |
| それを防ぐにはinput_plural要素の変更を行うたびにnameの数値を上から順番に割り振り直す必要がありますが、 |
| 最も厄介なのが.tagitにもfieldName:にも数値を割り当てた名前を設定しているので、 |
| それも探し出して値を変更しないといけません。 |
| これをやるのはJavascriptを読んで処理を理解できるなり、 |
| デベロッパーツールで.tagitが何の要素を追加したか把握できるなりしないと無理なので、 |
| 余りにも難しくなりそうなので一旦この部分は省かせて頂きました。 |
