想要改进我的jQuery代码,做我想要的,太丑了,IMO

前端之家收集整理的这篇文章主要介绍了想要改进我的jQuery代码,做我想要的,太丑了,IMO前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我在下面有这个jQuery脚本.但是因为我刚刚学习jQuery,所以我想利用这个工作代码并使其更简洁.

基本上它删除了一个包含背景图像的类,然后使div可见,这是指向站点区域的链接.这对我来说似乎过于重复.谢谢你的帮助.

代码

$(document).ready(function(){
    $('#res').live('mouSEOver',function(){
        $(this).removeClass('resume');
        $('#reslin').css('visibility','visible');   
    });

    $('#res').live('mouSEOut',function(){
        $(this).addClass('resume');
        $('#reslin').css('visibility','hidden');;   
    });

    $('#pro').live('mouSEOver',function(){
        $(this).removeClass('projects');
        $('#prolin').css('visibility','visible');
    });

    $('#pro').live('mouSEOut',function(){
        $(this).addClass('projects');
        $('#prolin').css('visibility','hidden');
    });

    $('#abo').live('mouSEOver',function(){
        $(this).removeClass('about');
        $('#abolin').css('visibility','visible');
    });

    $('#abo').live('mouSEOut',function(){
        $(this).addClass('about');
        $('#abolin').css('visibility','hidden');
    });

    $('#con').live('mouSEOver',function(){
        $(this).removeClass('contact');
        $('#conlin').css('visibility','visible');

    });

    $('#con').live('mouSEOut',function(){
        $(this).addClass('contact');
        $('#conlin').css('visibility','hidden');
    });
});

解决方法

tshauck,这是一个有效的解决方案,无需更改任何现有的HTML.
jQuery(document).function($) {

    var myClasses = {
        pro: 'projects',res: 'resume',abo: 'about',con: 'contact'
    }

    $('#res,#pro,#abo,#con').live('mouseenter',function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility','visible');

    }).live('mouseleave','hidden');
    });

});

祝好运.

猜你在找的jQuery相关文章