0

ここで見つけたブラウザウィンドウからファイルをドラッグアウトするためのコードを変更しようとしています: http://www.thecssninja.com/javascript/gmail-dragout

私のコードでは、コードを何度も繰り返さずに多数のファイルを処理できるように、for ループを使用したいと考えています。

これは私が持っているものです:

<a href = "file0" id = "0" draggable = "true" data-downloadurl="application/pdf:file0name.pdf:file:///C:/filepath/file0.pdf">file0</a>
<a href = "file1" id = "1" draggable = "true" data-downloadurl="application/pdf:file1name.pdf:file:///C:/filepath/file1.pdf">file1</a>
<a href = "file2" id = "2" draggable = "true" data-downloadurl="application/pdf:file2name.pdf:file:///C:/filepath/file2name.pdf">file2</a>
<a href = "file3" id = "3" draggable = "true" data-downloadurl="application/pdf:file3name.pdf:file:///C:/filepath/file3name.pdf">file3</a>

<script type = "text/javascript>
    var file_count = 3;
var fileDetails = [];

var files = new Array(file_count);
for(var i=0; i<=file_count; i++) {
    files[i] = document.getElementById(i);
}

if(typeof files[0].dataset === "undefined") {
    for (i=0; i<=file_count; i++) {
        fileDetails[i] = files[i].getAttribute("data-downloadurl");
    }
}else {
    for (i=0; i<=file_count; i++) {
        fileDetails[i] = files[i].dataset.downloadurl;
    }
}

//I'm pretty sure the problem starts here.
//If you substitue i for a specific element from the array and comment out the for loop, the script works just fine for the element specified.
for(i=0; i<=file_count; i++) {
    files[i].addEventListener("dragstart",function(evt){
        evt.dataTransfer.setData("DownloadURL",fileDetails[i]);
    },false);
}

問題がラベル付けされたところから始まることはかなり確信していますが、なぜ問題があるのか​​ 、それを解決する方法はわかりません.

私が指摘すべきいくつかのこと：

これは Chrome でのみ機能します。これは私にとって問題ではありません。

これで20以上のファイルを処理したい。

4

1 に答える 1

0

問題は実際にあなたが思っているところから始まります

//I'm pretty sure the problem starts here.
//If you substitue i for a specific element from the array and comment out the for loop, the script works just fine for the element specified.
for(i=0; i<=file_count; i++) {
    files[i].addEventListener("dragstart",function(evt){
        evt.dataTransfer.setData("DownloadURL",fileDetails[i]);
    },false);
}

基本的に、dragstart イベント リスナーはi、実行時にリストの最後の要素である にバインドされます。

以下の方がうまくいきます。

//I'm pretty sure the problem starts here.
//If you substitue i for a specific element from the array and comment out the for loop, the script works just fine for the element specified.
for(i=0; i<=file_count; i++) {
    files[i].addEventListener("dragstart", (function(idx) {
        return function(evt){
           evt.dataTransfer.setData("DownloadURL",fileDetails[idx]);
        }
    })(i),false);
}

上記のコードでは、バインドされた i の正しい値を持つ関数型のオブジェクトを作成して返します。基本的に、クロージャーは別のレベルで作成されるため、アクセスすると正しいデータが取得されます。

于 2013-06-04T15:16:42.643 に答える