Question

在网站上我使用jQuery。为了保持这段代码的简洁和简单，我想压缩一些代码。在我的jQuery代码中，我使用以下代码：

$(".dienst1").hover(function() {
    $( ".toelichting1" ).stop().fadeIn(500);
        $( ".uitleg1" ).stop().fadeTo( "fast", 0.9 );
        $( ".uitleg2" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg3" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg4" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg5" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg6" ).stop().fadeTo( "slow", 0.2 );
        $(".readmore1").stop().show();
        }, function() {
    $( ".toelichting1" ).stop().fadeOut(10);
        $( ".uitleg2" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg3" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg4" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg5" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg6" ).stop().fadeTo( "slow", 0.8 );
        $(".readmore1").stop().hide();
});

$(".dienst2").hover(function() {
    $( ".toelichting2" ).stop().fadeIn(500);
        $( ".uitleg1" ).stop().fadeTo( "fast", 0.9 );
        $( ".uitleg2" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg3" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg4" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg5" ).stop().fadeTo( "slow", 0.2 );
        $( ".uitleg6" ).stop().fadeTo( "slow", 0.2 );
        $(".readmore1").stop().show();
        }, function() {
    $( ".toelichting2" ).stop().fadeOut(10);
        $( ".uitleg2" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg3" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg4" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg5" ).stop().fadeTo( "slow", 0.8 );
        $( ".uitleg6" ).stop().fadeTo( "slow", 0.8 );
        $(".readmore1").stop().hide();
});

我多次使用此代码。是否有可能使这个功能或是否有另一种方法来避免重复这样的代码？

Answer 1

您可以使用属性以选择器[name^="value"]

开头

在您的代码中，您可以尝试：

$("div[class^='.dienst']").hover(function() {
    $("div[class^='.toelichting']").stop().fadeIn(500);
        $("div[class^='.uitleg']").stop().fadeTo( "fast", 0.9 );
        $(".readmore1").stop().show();
});

只需更改与该类相关联的div标记的html。

我意识到你在褪色时有不同的时间值，我认为对于最后一个嵌套的孩子，你需要采用不同的方法来做到这一点。

Answer 2

由于您针对多个不同的类进行相同的操作，因此您可以对这些元素进行分组：$(".uitleg1, .uitleg2")。

然后，您可以将它们组合在一起，只需拨打一次stop和fadeTo，就像这样：

$(".dienst1").hover(function() {
    $( ".uitleg1" ).stop()
                   .fadeTo( "fast", 0.9 );

    $( ".uitleg2,.uitleg3,.uitleg4,.uitleg5,.uitleg6" ).stop()
                                                       .fadeTo( "slow", 0.2 );
    $(".readmore1").stop()
                   .show();
}, function() {
    $( ".toelichting1" ).stop()
                        .fadeOut(10);

    $( ".uitleg2,.uitleg3,.uitleg4,.uitleg5,.uitleg6" ).stop()
                                                       .fadeTo( "slow", 0.8 );

    $(".readmore1").stop().hide();
});

为了节省记忆，你可以创建一个＆＃34;听众＆＃34;用于悬停事件的函数然后将它们附加到jQuery事件，如下所示：

function dienst1HoverListener() {
    $( ".toelichting1" ).stop().fadeIn(500);
    $( ".uitleg1" ).stop()
                   .fadeTo( "fast", 0.9 );

    $( ".uitleg2,.uitleg3,.uitleg4,.uitleg5,.uitleg6" ).stop()
                                                       .fadeTo( "slow", 0.2 );
    $(".readmore1").stop()
                   .show();
}

function dienst1HoverCompleteListener() {
    $( ".toelichting1" ).stop()
                        .fadeOut(10);

    $( ".uitleg2,.uitleg3,.uitleg4,.uitleg5,.uitleg6" ).stop()
                                                       .fadeTo( "slow", 0.8 );

    $(".readmore1").stop()
                   .hide();
}

$(".dienst1").hover(dienst1HoverListener, dienst1HoverCompleteListener);

紧凑的jQuery脚本

2 个答案: