teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問動的に生成した要素への指定（jQuery）

編集履歴

回答編集履歴

3

ちょこちょこミスってたので直しました。

2018/10/31 05:15

投稿

退会済みユーザー
test CHANGED
@@ -10,23 +10,13 @@
10
10
 
11
11
 
12
12
 
13
- **処理の流れ**
14
-
15
- ```
16
-
17
- ボタンをクリックする
18
-
19
- ---> ファイル入力の状態に合わせて、ファイル入力 を操作する
20
-
21
- ---> ファイル入力が自身の変化イベントをキャッチして、その変更を他の要素に反映させる
22
-
23
- ```
24
-
25
13
  **コード**
26
14
 
27
15
  ```html
28
16
 
29
17
  <html>
18
+
19
+
30
20
 
31
21
  <head>
32
22
 
@@ -38,13 +28,17 @@
38
28
 
39
29
  </head>
40
30
 
31
+
32
+
41
33
  <body>
42
34
 
43
35
  <div id="input-group">
44
36
 
45
- <input type="file" id="iptFile" class="invisible"　onchange="onChangeIptFile(event)">
37
+ <input type="file" id="iptFile" class="invisible" onchange="onChangeIptFile(event)">
46
38
 
47
- <input type="button" id="btn" value="ファイルを選択" onclick="onClickBtn(event)">
39
+ <input type="button" id="selectBtn" value="ファイルを選択" onclick="onClickBtn(event)">
40
+
41
+ <input type="button" id="removeBtn" value="削除" class="invisible" onclick="onClickBtn(event)">
48
42
 
49
43
  <label for="btn">ファイルが選択されていません</label>
50
44
 
@@ -72,7 +66,11 @@
72
66
 
73
67
  else {
74
68
 
69
+ // ファイル選択解除はイベントが発火しないので、こちらで発火させる
70
+
75
- iptFile.val(null);
71
+ iptFile.val('');
72
+
73
+ onChangeIptFile(null);
76
74
 
77
75
  }
78
76
 
@@ -80,11 +78,15 @@
80
78
 
81
79
  function onChangeIptFile(event) {
82
80
 
83
- var fileName = $(event.target).val();
81
+ var fileName = $('#iptFile').val();
84
82
 
85
83
  var label = $('#input-group > label');
86
84
 
87
- var btn = $('#btn')
85
+ var selectBtn = $('#selectBtn');
86
+
87
+ var removeBtn = $('#removeBtn');
88
+
89
+ var invisibleClass = 'invisible';
88
90
 
89
91
 
90
92
 
@@ -92,11 +94,11 @@
92
94
 
93
95
  if (fileName != '') {
94
96
 
95
- btn.val('削除');
96
-
97
97
  label.text(fileName);
98
98
 
99
+ selectBtn.addClass(invisibleClass);
100
+
99
- console.log(fileName);
101
+ removeBtn.removeClass(invisibleClass);
100
102
 
101
103
  }
102
104
 
@@ -104,9 +106,11 @@
104
106
 
105
107
  else {
106
108
 
107
- btn.val('ファイルを選択');
109
+ label.text('ファイルが選択されていません');
108
110
 
109
- label.val('ファイルが選択されていません');
111
+ selectBtn.removeClass(invisibleClass);
112
+
113
+ removeBtn.addClass(invisibleClass);
110
114
 
111
115
  }
112
116
 
@@ -116,6 +120,8 @@
116
120
 
117
121
  </body>
118
122
 
123
+
124
+
119
125
  </html>
120
126
 
121
127
  ```

2

追記

2018/10/31 05:15

投稿

退会済みユーザー
test CHANGED
@@ -1,10 +1,28 @@
1
- まるっと書き換えました。ファイル入力を隠したので、ブラウザ依存の見た目にはなりませんが…。
1
+ 処理がわかりやすくなるよう、まるっと書き換えました。シンプルだと思います。
2
2
 
3
3
 
4
4
 
5
- これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
5
+ ただ、ファイル入力を隠したので、それの見た目がブラウザ依存にはなりませんが…。
6
6
 
7
7
 
8
+
9
+ また、これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
10
+
11
+
12
+
13
+ **処理の流れ**
14
+
15
+ ```
16
+
17
+ ボタンをクリックする
18
+
19
+ ---> ファイル入力の状態に合わせて、ファイル入力 を操作する
20
+
21
+ ---> ファイル入力が自身の変化イベントをキャッチして、その変更を他の要素に反映させる
22
+
23
+ ```
24
+
25
+ **コード**
8
26
 
9
27
  ```html
10
28
 

1

微修正

2018/10/31 04:26

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,6 @@
1
- まるっと書き換えました。
1
+ まるっと書き換えました。ファイル入力を隠したので、ブラウザ依存の見た目にはなりませんが…。
2
+
3
+
2
4
 
3
5
  これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
4
6
 
@@ -22,7 +24,7 @@
22
24
 
23
25
  <div id="input-group">
24
26
 
25
- <input type="file" id="iptFile" style="display: none" onchange="onChangeIptFile(event)">
27
+ <input type="file" id="iptFile" class="invisible"　onchange="onChangeIptFile(event)">
26
28
 
27
29
  <input type="button" id="btn" value="ファイルを選択" onclick="onClickBtn(event)">
28
30