Q&A
ローカルのフォルダ内から画像を複数選択し、その画像（サムネイル）を押したらさらに大きく表示させる記述に挑戦しています。
javascript
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>カード</title> 6 <script src="jquery.js"></script> 7 </head> 8 9 <body> 10 <input id="target" type="file" multiple> 11 <div id="main"></div> 12 <div id="main2"></div> 13 14 <script type="text/javascript"> 15 document.getElementById( "target" ).addEventListener( "change", function() { 16 var fileList = this.files ; 17 for( var i=0,l=fileList.length; l>i; i++ ) { 18 // Blob URL 19 var blobUrl = window.URL.createObjectURL( fileList[i] ) ; 20 $('#main').append('<a><img id="' + i + '" class="izumo" src="' + blobUrl + '" style="width:5vw"></a>'); 21 $('.izumo').on('click', function(e) { 22 var n = $(this).attr('src'); 23 $('#main2').append('<a><img src="' + n + '" style="width:20vw"></a>'); 24 console.log(i); 25 }) 26 } 27 }); 28 29 30 </script> 31 </body> 32</html>
基本的な動きとしては期待通りですが、サムネイルをクリックしたさい複数回処理が実行されてしまい困っています。
例えば4つの画像を選択しサムネイル化したとして、
id0をクリックすると4回処理（4つの画像がappend）、id1だと3回、id3だと1回実行されます。
なぜでしょうか？
回答1件
0
ベストアンサー
.izumo へのイベント追加がforループの中にあるようなので
先に追加された.izumo要素に一周ごと何回もイベントが足されているからではないでしょうか？
投稿2020/10/21 06:28
総合スコア610
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/21 06:32