Question

我正在研究JQuery代码的优化，并且想知道是否有一种方法可以改进这段代码，因为它似乎很长......

$("#tabs-nav li a").hover(

        function(){
            if($(this).parent().hasClass('active')) {
            } else {
                $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
            }   
        },
        function(){
            if($(this).parent().hasClass('active')) {
            } else {
                $(this).stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
            }
        }
    );

非常感谢提前！

Answer 1

您可以通过将过滤器传递给parent函数来消除您的条件：

$('#tabs-nav li a').hover(function() {
    $(this).parent(':not(.active)').children('#tabs-nav li a').stop().animate({ opacity: 1, marginTop: '24px'}, 200);
}, function() {
    $(this).parent(':not(.active)').children('#tabs-nav li a').stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
});

如果您的<a>元素是<li>元素的直接子元素，则应使用Josh的解决方案。

Answer 2

$("#tabs-nav li:not(.active) a").hover(
    function(){
        $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
    },
    function(){
        $(this).stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
    }
);

Answer 3

$(".active #tabs-nav li a")...

只需使用选择器查看父级是否处于活动状态，并且不使用if语句。虽然如果父母的祖先是活跃的，它也会选择它。所以这取决于你的情况。

Answer 4

我只重写了一个，你会明白这个想法：

 function(){
                if($(this).parent(':not(".active")')) {
                        $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
                }   
        }

我该如何改进这个JQuery代码

4 个答案: