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

so I have this jQuery script below that works. But since I'm just learning jQuery, I'd like to take advantage of this working code and make it more terse.

所以我在下面有这个jQuery脚本。但是因为我刚刚学习jQuery，所以我想利用这个工作代码并使其更简洁。

Basically it removes a class which holds a background image, then makes a div visible which is a link to an area of the site. It seems overly repetitive to me. Thanks for the helppp.

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

THE CODE:

代码：

$(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');
    });
});

5 个解决方案

#1

tshauck, here is a efficient solution for your problem without changing any of your existing HTML.

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', function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility', 'hidden');
    });

});

Good luck.

祝你好运。

5 个解决方案

#1

更多相关文章

随机推荐