回答編集履歴
1
複数の組のケース
answer
CHANGED
|
@@ -4,3 +4,19 @@
|
|
|
4
4
|
const upload1 = $('.upload-1');
|
|
5
5
|
upload1.on('change', file1.bind(upload1[0], '.js-upload-filename-1'));
|
|
6
6
|
```
|
|
7
|
+
|
|
8
|
+
----
|
|
9
|
+
|
|
10
|
+
もし `<input type="file">` と `js-upload-filename-1` のような要素の組が複数必要なら、イベントハンドラに引数を与えられるようにするよりは、属性や要素の構造で紐付けを行ったほうがよいかもしれません。
|
|
11
|
+
```html
|
|
12
|
+
<input type="file" name="file" class="upload" data-target=".js-upload-filename-1">
|
|
13
|
+
<p class="js-upload-filename-1">ファイルを選択されていません</p>
|
|
14
|
+
<input type="file" name="file" class="upload" data-target=".js-upload-filename-2">
|
|
15
|
+
<p class="js-upload-filename-2">ファイルを選択されていません</p>
|
|
16
|
+
```
|
|
17
|
+
```js
|
|
18
|
+
$('.upload').on('change', function() {
|
|
19
|
+
$(this.dataset.target).text(this.files[0].name);
|
|
20
|
+
});
|
|
21
|
+
```
|
|
22
|
+
|