傳遞一個參數的函數來懸停在jQuery

Question

我是jQuery的新手，我覺得我錯過了一些非常明顯和基本的東西，但我不能完全包裹它。

在我有一些代碼當對象被懸停在將動畫筆劃寬度更寬的量和它的工作的任何情況下：

$(function() { 
    $("#wheel1").hover(grow1, shrink1); 
}); 

function grow1(evt) { 
    $("#wheel1").animate({'stroke-width':'100'},300); 
    $("#circle1container").css({'display':'block'}); 
    $("#circle1container").animate({'opacity':'1'},300); 
} 

function shrink1(evt) { 
    $("#wheel1").animate({'stroke-width':'55'},300); 
    $("#circle1container").animate({'opacity':'0'},300); 
} 

但是我有其他10個對象，我也想爲做到這一點，因此而不是複製和粘貼此9次以上，並改變數的9倍，我試圖鞏固它，這並不工作：

$(function() { 
$("#wheel1").hover(grow("1"), shrink("1")); 
$("#wheel2").hover(grow("2"), shrink("2")); 
$("#wheel3").hover(grow("3"), shrink("3")); 
$("#wheel4").hover(grow("4"), shrink("4")); 
$("#wheel5").hover(grow("5"), shrink("5")); 
$("#wheel6").hover(grow("6"), shrink("6")); 
$("#wheel7").hover(grow("7"), shrink("7")); 
$("#wheel8").hover(grow("8"), shrink("8")); 
$("#wheel9").hover(grow("9"), shrink("9")); 
$("#wheel10").hover(grow("10"), shrink("10")); 

function grow(number) { 
var name = "#wheel" + number; 
$("#wheel" + number).animate({'stroke-width':'100'},300); 
$("#circle" + number + "container").css({'display':'block'}); 
$("#circle" + number + "container").animate({'opacity':'1'},300); 
} 

function shrink(number) { 
$("#wheel" + number).animate({'stroke-width':'55'},300); 
$("#circle" + number + "container").animate({'opacity':'0'},300); 
} 

}); 

可能仍然不是最有效的方式，但少一點冗長，更容易改變我的想法。我只是不確定交易是在這裏。歡迎任何幫助，謝謝！

http://jsfiddle.net/F4Yjj/5/這顯示了我嘗試在懸停時爲懸停工作的綠色形狀（此消息中的代碼的第一位）懸停的對象。

Answer 1

而不是使用的ID，必須是唯一的選擇輪，給每個車輪的一類「車輪」，讓您可以一次選擇所有的人：

<path id="wheel10" class="wheel" .... /> 
<path id="wheel9" class="wheel" ... /> 
etc. 

然後，您可以選擇所有「輪子」使用jQuery，並指這是一個在你的函數中使用$(this)徘徊的一個：

$(function() { 
    $("path.wheel").hover(grow1, shrink1); 
}); 

function grow1() { 
    $(this).animate({'stroke-width':'100'},300); 
} 

function shrink1() { 
    $(this).animate({'stroke-width':'55'},300); 
} 

小提琴：http://jsfiddle.net/F4Yjj/1/

Ë DIT：使用這種方法，你不需要在你的函數中使用「evt」。 http://jsfiddle.net/F4Yjj/3/

編輯：還要顯示另一個元素。既然你有每個車輪（如在更新的HTML所示）不同的物理元素，你可以決定懸停輪的ID，並通過其ID選擇其它元素：

function grow1() { 
    var id=$(this).prop('id').split('_'); 
    $(this).animate({'stroke-width':'100'},300); 
    $("#circlecontainer_"+id[1]).fadeIn(300); 
} 

function shrink1() { 
    var id=$(this).prop('id').split('_'); 
    $(this).animate({'stroke-width':'55'},300); 
    $("#circlecontainer_"+id[1]).fadeOut(100); 
} 

這撥弄有圈wheel1和wheel2：http://jsfiddle.net/F4Yjj/7/

您也可以通過對所有車輪使用一箇中心圓來濃縮此值。懸停後，用適當的百分比，顏色等更新圈子的文本。

Answer 2

使用類選擇器而不是ID通過使用類選擇器，懸停將應用於所有適用的類。作爲旁註，我不會使用懸停，因爲我相信它已被棄用在jquery 1.9.1或2相反，你可以使用鼠標和鼠標。

類似：

$(document).ready(function(){ 
    $('body').on('mousein','.wheel',function(){ 
    $(this).animate({'stroke-width':'100'},300); 
    }); 

    $('body').on('mouseout','.wheel',function(){ 
    $(this).animate({'stroke-width':'55'},300); 
    }); 
}); 

則只需確保ID所有車輪都附加類.wheel