2012-01-28 22 views
0

jPlayer(jquery audio player):jPlayer1、jPlayer2、jPlayer3、jPlayer4の各インスタンスは、オーディオファイルで初期化され、プリロードされています。jQuery要素IDをインクリメントする方法

以下の関数を呼び出すと、既存の配列をトラバースし、プリロードされたオーディオを再生するメソッドを追加します。

function addPlayAudioMethodToExerciseArray(){ 
    for (i in qaArray){ 
     qaArray[i].playAnswer = function(){ $('#jPlayer'+i).jPlayer('play',0);} 
    } 
} 

それは一部を除いて大丈夫メソッドを作成します( '#jPlayer' + I)( '#jPlayer2')、( '#jPlayer1')になることを評価されていない、など

多く前もって感謝します。 注:私は騒ぎです。

+0

これはJavaScriptに新しいそれらのための非常に一般的な落とし穴です。 – Pointy

+0

qaArrayの内容を教えてください。 - あなたのために(i in qaArray)私は0になるので、最初の '#jPlayer' + 'は#jPlayer0'になります...存在しません。私はまた、いくつかの閉鎖を追加する必要があると思うか、私はいつも最後のものになります(qaArray.length-1)。 – dievardump

+0

私は転記のために簡略化しました。元のコードはif(i> 0){//開始トラバース}でした。したがって、このメソッドはqaArray [1]から始まります。これは '#jsPlayer1'がハードコードされている場合に機能します。もちろん、すべてのメソッドは同じjsPlayer1をトリガーします。意図したとおりではありません。 – 10davvid

答えて

2

問題は、すべての "playAnswer"関数がまったく同じ "i"変数をラップすることです。つまり、「i」は1つしかありません(この場合、varで宣言していないので、グローバルです)。

もう1つのを使用すると、コールバックごとに別々の「i」を指定できます。

function addPlayAudioMethodToExerciseArray(){ 
    function makePlayerCallback(i) { 
     return function() { 
     $('#jPlayer' + i).jPlayer('play', 0); 
     }; 
    } 

    for (var i = 0; i < qaArray.length; ++i){ 
     qaArray[i].playAnswer = makePlayerCallback(i); 
    } 
} 

「makePlayerCallback」機能はに効果的にローカルであること機能することを、自分自身の「i」を個別に持っているコールバック関数になり、独自のパラメータの「i」を、持っています。その関数を呼び出すたびに、返されたコールバック関数の周りに「クロージャ」と呼ばれるものが作成されます。 (私のループはゼロから始まります;もしあなたの識別子が1から始まっていれば、どこかに1を加えればそれを考慮する必要があります。 "i"はvarのループで "addPlayAudioMethodToExerciseArray"(ロングファンクションの名前の少年です;あなたはそれを頻繁に入力する必要はないと思っています。また、「qaArray」は本当に正直でゴシックな配列であり、n個のオブジェクトではないという前提で、数値インデックスとして使用しました。配列に数値インデックスを使用することをお勧めします。

+1

IDが実際に1(jPlayer1、jPlayer2、jPlayer3、jPlayer4)から始まる場合は、makePlayerCallback(i + 1)を呼び出す必要があります。配列インデックスは0から始まるから – dievardump

+0

@DieVarDumpはい、本当に - 私は答えを更新します。 – Pointy

+0

console.debugはまだ表示されています: playAnswer:function(){$( '#jPlayer' + i).jPlayer( 'play'、0);} – 10davvid

0

使用colsures

はこれを試してみてください。

for(i in qaArray) 
    { 
     qaArray[i].playAnswer = function (num) 
     { 
      return function() 
      { 
       $('#jPlayer' + num).jPlayer('play', 0); 
      } ; 
     }(i) 
    }; 
関連する問題