Question

所以我在下面有这个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');
    });
});

Answer 1

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

});

祝你好运。

Answer 2

给每个元素组指定相同的类（即res，pro，abo，con现在有类className，reslin，prolin，abolin和conlin有类linClassName），然后执行这样：

$(document).ready(function(){
    $('.className').live('mouseover',function(){
        $(this).removeClass('contact');
        $('.linClassName').css('visibility','visible');

    });

    $('.className').live('mouseout',function(){
        $(this).addClass('contact');
        $('.linClassName').css('visibility','hidden');
    });
});

您还可以链接事件as suggested by Omar。

Answer 3

另一个建议是连接事件委托：

$('#res').live('mouseover',function(){
        //code here  
    }).live('mouseout',function(){
        //code here  
    });

Answer 4

您确定要使用可见性样式吗？如果无关紧要，最好使用.hide（）和.show（）方法。马修说，你可以为每组元素使用相同的类名。像这样：


    $(document).ready(function(){
        $('.group1').live('mouseover',function(){
            $(this).removeClass('resume');
            $('.group2').show();
        }).live('mouseout',function(){
            $(this).addClass('resume');
            $('.group2').hide();
        });
    }

Answer 5

使用className而不是已经建议的ID，我还建议不要像你一样内联你的函数

$('.className').live('mouseover',function(){
    $(this).removeClass('contact');
    $('.linClassName').css('visibility','visible');

});

会更清洁

$('.className').live('mouseover', className_mouseover);
//Any other event subscriptions go here

//Then later, write the functions
function className_mouseover(){
    $(this).removeClass('contact');
    $('.linClassName').css('visibility','visible');

}

只有当代码不是全部混合在一起时才能更容易地使用代码

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

5 个答案: