通过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的get会变低，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");
});
});

但是我想还有一个更好的方法..还是我错了？:)

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);
    });
    ...
}