For循環無法在Jquery選擇器上工作

在for循環上掙扎..我似乎無法使它工作..試圖添加for循環到（「.circle」+（i + 1））選擇器，但不隱藏和褪色在一個圈子裏（i）。這是可能的還是一些類似的方法？For循環無法在Jquery選擇器上工作

任何幫助將不勝感激！

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<body> 
<ul class="menu"> 
    <li class="first"><a href="#btn1">btn1</a></li> 
    <li class="second"><a href="#btn2">btn2</a></li> 
    <li class="third"><a href="#btn3">btn3</a></li> 
    <li class="forth"><a href="#btn4">btn4</a></li> 
</ul> 

<div class="circle1 circle">1</div> 
<div class="circle1 circle">2</div> 
<div class="circle1 circle">3</div> 
<div class="circle4 circle">4</div> 

<script> 
for(i=0;i<$(".menu li").length;i++){ 
    $(".menu li").eq(i).on('click',function(){ 
     $(".circle").hide(); 
     $('.circle'+(i+1)).stop().fadeIn('300'); 
     return false; 
    }); 
    } 
</script> 
</body> 
</html>

來源

2014-02-19 Niraj paul

簡答：關閉。 'i'總是等於它在你的點擊處理程序循環結束時的值。 –

你的問題是變量的作用域的方式。 i將始終具有您的點擊處理程序中循環結束時的值。你能解決這個問題是這樣的：

for(i=0;i<$(".menu li").length;i++){ 
    (function(j) { 
     $(".menu li").eq(j).on('click',function(){ 
      $(".circle").hide(); 
      $('.circle'+(j+1)).stop().fadeIn('300'); 
      return false; 
     }); 
    })(i); 
}

什麼上面所做的是通過使用創建一個新的範圍和副本i在循環過程中的價值立即調用函數表達式（IIFE）創建一個封閉。

它也會被分配$(".menu li").length到循環之前的變量，以便jQuery在每次循環時都不重新創建集合。

要理解這是怎麼回事，比較這：

for(i=0;i<5;i++){ 
    setTimeout(function() { 
     console.log(i); 
    },100); 
} 

// outputs: 5 5 5 5 5

要這樣：

for(i=0;i<5;i++){ 
    (function(i) { 
     setTimeout(function() { 
      console.log(i); 
     },100); 
    })(i); 
} 

// outputs: 0 1 2 3 4

http://jsfiddle.net/PLsUN/

來源

2014-02-19 16:59:01

馬特Burland的答案是正確的，非常徹底。這僅僅是一個替代的建議，以避免使用for循環（如果你喜歡）：

// Use the jQuery's already-available `.each` method 
$(".menu li").each(function(index, list_element){ 

    (function(list_index){ // as per Matt's answer 
     list_element.on('click',function(){ 
      $(".circle").hide(); 
      $('.circle'+(list_index+1)).stop().fadeIn('300'); 
      return false; 
     } 
    })(index); 

});

的效果是一樣的，並沒有性能上的差異（據我所知）;我覺得它更清潔。

來源

2014-02-19 20:21:39

For循環無法在Jquery選擇器上工作

回答

相關問題