javascript - jQuery - mouseOver 改变 div

Question

我有一个菜单，在每个元素的鼠标悬停事件中，加载到第二个 div 中的图像应该改变，而 onMouseout 它应该替换为原始内容。

此时，我将原始内容保存到一个 var 中，并为每个菜单项分别创建一个 onMouseover 和 onMouseOut 事件。

Jquery:

 $(document).ready(function(){
    var heroSwap= $('#swapspace').html();

    $('#menu1').mouseover(function(){
        $('#swapspace').html('<img src="img/1.JPG"></img>');

    });
    $('#menu1').mouseout(function(){

        $('#swapspace').html(heroSwap);

    });
    .... ..*ETC  There are 7 More of these identical except for id*.. ....

});

问题:

1. 有什么方法可以创建一个可以处理来自菜单标记的参数的通用函数吗？
2. 不是交换 innerHTML img 标签来创建由 onMouseover/onMouseout 事件显示/隐藏的隐藏 div 会更容易吗？

完整示例: Sample Site

Answer 1

您可以轻松地创建通用函数。您可以在 #menu1 标签上添加一个带有图像 url 和类名的属性:

 <li class='menu' data-src='img/1.JPG'></li>

然后创建这样的函数:

$('.menu').mouseover(function(){
    $('#swapspace').html('<img src="'+$(this).data('src')+'"></img>');

});
$('.menu').mouseout(function(){

    $('#swapspace').html(heroSwap);

});

关于你的第二个问题，我会简单地交换你的 img 的 src 而不是改变整个 HTML。

$('#swapspace').find('img').attr('src', $(this).data('src')); //on hover
$('#swapspace').find('img').attr('src', ''); //on out