小巧的jQuery腳本

在網站上我使用jQuery。爲了保持這段代碼簡潔而簡單，我想壓縮一些代碼。在我的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(); 
});

我多次使用此代碼。是否有可能做出這個功能還是有另一種方法來避免這樣重複的代碼？

來源

2015-03-31 alex2408

雖然沒有這麼一個問題的最合適的，我會爲您提供，你應該表現出你的標記，並描述了爲了得到該代碼的意圖意見最好的建議。很難確切地知道如果不知道它應該做什麼以及它在運行什麼，這裏可以修剪什麼。 – JAAulde 2015-03-31 19:24:38

您可以使用屬性與選擇[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標籤。

我意識到你有不同的時間值時，我認爲對於最後嵌套的孩子，你將需要一種不同的方式來做到這一點。

來源

2015-03-31 19:27:15 abaracedo

由於您對幾個不同的類進行相同的操作，因此可以按如下方式對元素進行分組：$(".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(); 
});

爲了節省內存，您可以懸停事件創建一個「監聽器」功能，然後將其附加到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);

來源

2015-03-31 19:30:39 BenR

小巧的jQuery腳本

回答

相關問題