回答編集履歴

3

ほそく

2019/02/15 01:45

投稿

papinianus
papinianus

スコア12705

test CHANGED
@@ -91,3 +91,89 @@
91
91
  });
92
92
 
93
93
  ```
94
+
95
+ ---
96
+
97
+ 最終状態
98
+
99
+ ```javascript
100
+
101
+ /* 追加 */
102
+
103
+ $(document).on("click","#add", function(){
104
+
105
+ var tag_cnt = parseInt(tag_num) + 1;
106
+
107
+ var add_list = `
108
+
109
+ <li>
110
+
111
+ <span class="box_width"></span>
112
+
113
+ <input type="text" class="box">
114
+
115
+ <button type="button" class="del">del</button>
116
+
117
+ </li>`;
118
+
119
+ $(this).before($(add_list));
120
+
121
+ var tag_num = $('li').length;
122
+
123
+ if( tag_num >= 3 ){
124
+
125
+ $('#add').css('display','none');
126
+
127
+ }
128
+
129
+ });
130
+
131
+ /* 削除 */
132
+
133
+ $(document).on("click",".del", function(){
134
+
135
+ if( $('li').length !== 1 ){
136
+
137
+ $(this).parent('li').remove();
138
+
139
+ }
140
+
141
+ if( $('li').length < 3 ){
142
+
143
+ $('#add').css('display','block');
144
+
145
+ }
146
+
147
+ });
148
+
149
+ /* 入力時の横幅 */
150
+
151
+ $(document).on("input keyup change load",".box", function(){
152
+
153
+ string = $(this).val();
154
+
155
+ target = $(this).closest('li').find('.box_width');
156
+
157
+ widthPixel = strWidth(target,string);
158
+
159
+ // 幅変更
160
+
161
+ if( widthPixel >= 60 ){
162
+
163
+ $(this).css('width',widthPixel+'px');
164
+
165
+ }
166
+
167
+ });
168
+
169
+ function strWidth(trg,str) {
170
+
171
+ var width = trg.text(str).get(0).offsetWidth;
172
+
173
+ trg.empty();
174
+
175
+ return width;
176
+
177
+ }
178
+
179
+ ```

2

ついき

2019/02/15 01:45

投稿

papinianus
papinianus

スコア12705

test CHANGED
@@ -65,3 +65,29 @@
65
65
  });
66
66
 
67
67
  ```
68
+
69
+
70
+
71
+ * del
72
+
73
+ ```javascript
74
+
75
+ /* 削除 */
76
+
77
+ $(document).on("click",".del", function(){
78
+
79
+ if( $('li').length !== 1 ){
80
+
81
+ $(this).parent('li').remove();
82
+
83
+ }
84
+
85
+ if( $('li').length < 3 ){ //here 判定の不等号がおかしい
86
+
87
+ $('#add').css('display','block'); //here #がない
88
+
89
+ }
90
+
91
+ });
92
+
93
+ ```

1

ついき

2019/02/15 01:44

投稿

papinianus
papinianus

スコア12705

test CHANGED
@@ -25,3 +25,43 @@
25
25
  });
26
26
 
27
27
  ```
28
+
29
+
30
+
31
+ * add 3
32
+
33
+ 3個になった時点で消すには、こういう風に追加後に、「消したい条件なら」「消す」とする
34
+
35
+ ```javascript
36
+
37
+ /* 追加 */
38
+
39
+ $(document).on("click","#add", function(){
40
+
41
+ var tag_cnt = parseInt(tag_num) + 1;
42
+
43
+ var add_list = `
44
+
45
+ <li>
46
+
47
+ <span class="box_width"></span>
48
+
49
+ <input type="text" class="box">
50
+
51
+ <button type="button" class="del">del</button>
52
+
53
+ </li>`;
54
+
55
+ $(this).before($(add_list));
56
+
57
+ var tag_num = $('li').length; //here
58
+
59
+ if( tag_num >= 3 ){
60
+
61
+ $('#add').css('display','none');
62
+
63
+ }
64
+
65
+ });
66
+
67
+ ```