jQuery中使用循環

Question

$(document).ready(function() 
{ 
    $for(i=1;i<8;i++) 
    { 
     $("#"+i).hover(function() { 
      $("#"+i).stop().animate({left:"50px"}); 
     }, 
     function() { 
      $("#"+i).stop().animate({left:"30px"}); 
     }); 
    } 
}); 

我用於循環這裏以避免懸停 功能的多個聲明它不工作，我怎樣才能申報我的DIV ID我的DIV ID是1-7.plz告訴我如何 我應該使用循環內的div ids。

Answer 1

這是你如何在JavaScript中做一個循環：

for(var i = 1; i < 8; i++) 

沒有jQuery的需要。

此外，你使用數字作爲你的DOM元素的ID，這是無效的。 ID應該以字母開頭。

此外，這些內部函數正在使用您的循環的變量，這是不會工作;你會結束每個處理程序試圖選擇元素8，因爲每個處理程序正在關閉i。

不斷變化的循環變量的當前值傳遞給潛在的事件處理程序，你必須「打破封閉」是這樣的：

$("#el"+i).hover(
    (function(local_i) { return function() { $("#el"+ local_i).stop().animate({left:"50px"}); } })(i), 
    (function(local_i) { return function() { $("#el" + local_i).stop().animate({left:"30px"}); } })(i) 
}); 

，但其實你只是抓住了你的東西「再上空盤旋，所以：

$("#"+i).hover(function() { 
     $(this).stop().animate({left:"50px"}); 
    }, 
    function() { 
     $(this).stop().animate({left:"30px"}); 
    }); 

應該正常工作

Answer 2

看起來你正在使用數字作爲標識，這裏是介紹如何創建的ID在計算器上一個偉大的答案：What are valid values for the id attribute in HTML?。

$(document).ready(function() 
{ 
    for(var i = 1; i < 8; i++)//see that I removed the $ preceeding the `for` keyword, it should not have been there 
    { 
     $("#"+i).hover(function() { 
      $(this).stop().animate({left:"50px"});//also notice that instead of using `"#" + i` as the selector inside the anonymous function I changed it to `this` so it properly references the hovered element 
     }, 
     function() { 
      $(this).stop().animate({left:"30px"}); 
     }); 
    } 
}); 

如果你添加一個類你都綁定到這個元素可以majorly簡化：

$(function() 
{ 
    $(".hover-class").hover(function() { 
     $(this).stop().animate({left:"50px"}); 
    }, 
    function() { 
     $(this).stop().animate({left:"30px"}); 
    }); 
}); 

下面是該解決方案的演示：http://jsfiddle.net/FJQNa/

這將選擇所有具有hover-class類的元素，並將事件處理程序綁定到它們。

編輯

您還可以通過用逗號分隔的選擇器選擇一次使用ID的多個元素：jQuery的

$(function() 
{ 
    $("#ele-1, #ele-2, #ele-3, #ele-4, #ele-5, #ele-6, #ele-7").hover(function() { 
     $(this).stop().animate({left:"50px"}); 
    }, 
    function() { 
     $(this).stop().animate({left:"30px"}); 
    }); 
}); 

文檔的多個選擇：http://api.jquery.com/multiple-selector/

Answer 3

使用this代替i。 i持續超出for循環，因此它總是嘗試訪問$（'＃8'）`。

$(document).ready(function() 
{ 
    for(var i=1; i<8; i++) //Declare var here otherwise it becomes global and that's not what you want for a simple counter 
    { 
     $("#"+i).hover(function() { //i is valid here because it gets used synchronously with the loop 
      $(this).stop().animate({left:"50px"}); 
      //Use this instead of i because of "closure." 
      //The anonymous function gain access to the variable to be 
      // used later, but the loop will continue to increment, 
      // changing the value. 
     }, 
     function() { 
      $(this).stop().animate({left:"30px"}); 
     }); 
    } 
}); 

Answer 4

類將是更好的解決方案（另一個已經提出了這個解決方案）如果你絕對必須使用的ID，這可能制定出一個好一點：

var selector = "#1"; 
for(var i = 2; i < 8; i++) 
    selector+=",#"+i; 

$(selector).hover(
function() { 
    $(this).stop().animate({left:"50px"}); 
}, 
function() { 
    $(this).stop().animate({left:"30px"}); 
}); 

Answer 5

使用類不僅可以將它們分組語義，但也使得選擇更容易。使用this。您還可以使用jQuery.each（）將行爲添加到所有選定的元素。

$(function() { 
    function move50() { 
     $(this).stop().animate({left: "50px"}, 500); 
    } 
    function move30() { 
     $(this).stop().animate({left: "30px"}, 500); 
    } 
    $(".mydiv").each(function (i, elem) { 
     $(elem).hover(move50, move30); 
    }); 
}); 

嘗試在這裏 - http://jsfiddle.net/dkBY2/