将鼠标悬停在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); 
    }); 
    ... 
}