ifステートメントで配列が定義されていないことを示しています

Question

コースのように見えるHTMLマークアップのブロックがあります。これは私がコースの束を持って

<ul class="box-3036"> 
    <li aria-selected="true"> 
    <a href="#" id="ui-id-5">Dentistry</a> 
    </li> 
</ul> 

を使用してCMSで私のクライアントのを事前に定義され、ここでは別のコースについては、このHTMLブロックの他の例を示します。

<ul class="box-3032"> 
    <li aria-selected="true"> 
    <a href="#" id="ui-id-7">Pharmacy</a> 
    </li> 
</ul> 

これらのすべてのコースのjQueryコードを作成しようとしています。 HTMLブロックから、ここでは独自の情報

• <ul>クラス
• <a> ID
• あると<a>クリックを2つのコースのURL

を開きますここで私が持っているjQueryのコードです今。私が直面しています問題は、URLが未定義値ここで

box = [ 
    ".box-3036", 
    ".box-3032" 
]; 

uiid = [ 
    "a#ui-id-5", 
    "a#ui-id-7" 
]; 

urlfirst = [ 
    "http://www.yahoo.com", 
    "http://www.gmail.com" 
]; 

urlsecond = [ 
    "http://www.google.com", 
    "http://www.7senarai.com " 
]; 



for (var i = 0; i < box.length; i++) { 
     $(box[i] + " " + uiid[i]).click(function() { 

     var pid = $(this).parent().attr("aria-selected"); 
     if(pid == "true") { 
     //window.open(urlfirst[i], '_blank'); 
     //window.location.href = urlsecond[i]; 
     alert(urlfirst[i]); 
     alert(urlsecond[i]); 

     } 
    }); 

} 

に私に与えているvarsのことですだ私の私はiがそれぞれにスコープされるようにあなたがループのためではなく、forEachのを使用することをお勧めjsfiddle

Answer 1

問題は、ループのスコープの中var iが上であるということですあなたがクリックするために渡す関数は、このケースでは2のループが終了した後にiの値を取得しています。 iにクリック機能の有効範囲を設定したい場合

for (var i = 0; i < box.length; i++) { 
    (function (i) { 
      $(box[i] + " " + uiid[i]).click(function() { 
      var pid = $(this).parent().attr("aria-selected"); 
      if(pid == "true") { 
      //window.open(urlfirst[i], '_blank'); 
      //window.location.href = urlsecond[i]; 
      alert(urlfirst[i]); 
      alert(urlsecond[i]); 

      } 
     }); 
    })(i); // bring i into scope 
} 

Answer 2

結合。

box.forEach(function(aBox, i){ 
    $(aBox + " " + uiid[i]).click(function() { 
    var pid = $(this).parent().attr("aria-selected"); 
    if (pid == "true") { 
     //window.open(urlfirst[i], '_blank'); 
     //window.location.href = urlsecond[i]; 
     console.log(i); 
     console.log(urlfirst[i]); 
     console.log(urlsecond[i]); 
    } 
    }); 
}); 

Answer 3

ので、同じようiの価値を維持するために、ループの内容の周りにクロージャを使用します。

for (var i = 0; i < box.length; i++) { 
    (function(i) { 
     $(box[i] + " " + uiid[i]).click(function() { 

      var pid = $(this).parent().attr("aria-selected"); 
      if(pid == "true") { 
      //window.open(urlfirst[i], '_blank'); 
      //window.location.href = urlsecond[i]; 
      alert(urlfirst[i]); 
      alert(urlsecond[i]); 

      } 
     }); 
    })(i); 
} 

DEMO