將鼠標懸停在ID上更改圖像

Question

<section id="wheel_section"> 
<nav class="position"> 
    <a href="#" class="pos-1">LOC 1</a> 
</nav> 
<nav class="position"> 
    <a href="#" class="pos-2">LOC 2</a> 
</nav> 
<nav class="position"> 
    <a href="#" class="pos-3">LOC 3</a> 
</nav> 
<nav class="position"> 
    <a href="#" class="pos-4">LOC 4</a> 
</nav> 
<nav class="position"> 
    <a href="#" class="pos-5">LOC 5</a> 
</nav> 
</section> 
<section id="wheel_wheel"> 
<p> 
    <img id="the_wheel" src="position_1.gif" width="233" height="233" align="absmiddle" /> 
</p> 
</section> 

試圖更改懸停時的圖像（pos-1，pos-2等等）需要更改「the_wheel」中的圖像。這些都是gif，而且id越高，gif的旋轉速度越快。如果我將鼠標移動到左側，那麼ID就會變小，GIF的旋轉速度會變慢，這就是它們的製作方式。

嘗試這樣：

$(document).ready(function(){ 
$("#wheel_section .position .pos-1").hover(function() { 
    $('img#the_wheel').attr("src", "position_1.gif"); 
}); 

$("#wheel_section .position .pos-2").hover(function() { 
    $('img#the_wheel').attr("src", "position_2.gif"); 
}); 

$("#wheel_section .position .pos-3").hover(function() { 
    $('img#the_wheel').attr("src", "position_3.gif"); 
}); 

$("#wheel_section .position .pos-4").hover(function() { 
    $('img#the_wheel').attr("src", "position_4.gif"); 
}); 

$("#wheel_section .position .pos-5").hover(function() { 
    $('img#the_wheel').attr("src", "position_5.gif"); 
}); 
}); 

，但我想有一個更好的aproach也..還是我錯了？ :)

Answer 1

有兩件事情：

• 預緊您的圖像
• DRY（不要重複自己）
• 使用jQuery集合的力量

---

var wheels = [], 
    wheelcount = 5; 

// Preload the images 
for(var i = 1; i <= wheelcount; i++) 
    wheels.push($('<img/>').attr('src', 'position_' + i +'.gif')); 

// Wire up the mouseenter event on each element 
$("#wheel_section>nav>a").mouseenter(function() { 
    var c = $(this).attr('class'); 
    var i = parseInt(c.substring(c.indexOf('-')+1)) - 1; 
    $('img#the_wheel').attr('src', wheels[i].attr('src')); 
}); 

Answer 2

你或許應該先緩存圖像，然後進行修改：

$(document).ready(function(){ 
    // preload and cache images 
    var $pos1 = $('<img/>').attr('src', 'position_1.gif').attr('id', 'the_wheel'); 
    var $pos2 ... 
    ... 
    var $pos5 ... 

    $("#wheel_section .position .pos-1").hover(function() { 
     $('img#the_wheel').replaceWith($pos1); 
    }); 
    ... 
}