JQuery悬停功能无法正常工作

Question

我有三个图像(例如 tab1.jpg)以及鼠标悬停图像(例如 tab1m.jpg)，我试图将它们简化为单个 JQuery 悬停功能。在我使用之前:

$('#tab1').hover(function(){
    $(this).attr("src", 'images/tab1m.jpg');
},
function(){
    $(this).attr("src", 'images/tab1.jpg');
});
$('#tab2').hover(function(){
    $(this).attr("src", 'images/tab2m.jpg');
},
function(){
    $(this).attr("src", 'images/tab2.jpg');
});
$('#tab3').hover(function(){
    $(this).attr("src", 'images/tab3m.jpg');
},
function(){
    $(this).attr("src", 'images/tab3.jpg');
});

这有效，但不必要的冗长和冗长。所以我尝试将其更改为:

$('.navimg').hover(function(){
    var tab = ($(this).attr('id')).substring(3,4);
    $(this).attr('src','images/tab'+tab+'m.jpg');
},
function(){
    $(this).attr('src','images/tab'+tab+'.jpg');
});

这不起作用——当我将鼠标悬停在图像上时，它会成功更改，但不会恢复到原始 (tab1.jpg/tab2/tab3) 图像。谁能告诉我为什么会发生这种情况？谢谢!

Answer 1

这是两个不同的函数，具有两个不同的范围。您无法在第二个变量中访问在其中一个变量中声明的变量。

在hover()之外进行声明var tab，以便在两个内部函数中都可以访问它:

var tab = '';

$('.navimg').hover(
    function(){
        tab = ($(this).attr('id')).substring(3,4);
        $(this).attr('src','images/tab'+tab+'m.jpg');
    },
    function(){
        $(this).attr('src','images/tab'+tab+'.jpg');
    }
);