jQueryインタラクションでSpringのクリーニングが必要

Question

私は新しいサイトでいくつかのjQueryインタラクションを使用しています。唯一の問題は、危険であると私は十分に知っています。誰かがこれをきれいにするのを助けることができるか偉大な作品、私はちょうど私のようにドームに "スプラッシュ"したくありません。この同じことを達成するための凝縮された方法があると確信しています。 ".rotate"関数は実際には後で他の方法で操作する画像を回転するプラグインを呼び出しています。おかげ

(function($){})(window.jQuery); 

$(document).ready(function(){ 
    $("#header").animate({ opacity: "1" }, 1000); 

    $("#home_2").rotate(-10); 
    $("#home_3").rotate(10); 
    $("#home_4").rotate(20); 
    $("#home_5").rotate(-20); 

    var width = $(window).width(); 
    $("#home_5").animate({ left: 44 + '%', opacity: "1" }, 1000); 
    $("#home_4").delay(2000).animate({ right: 44 + '%', opacity: "1" }, 1000); 
    $("#home_2").delay(6000).animate({ left: 48 + '%', opacity: "1" }, 1000); 
    $("#home_3").delay(4000).animate({ right: 48 + '%', opacity: "1" }, 1000); 
    $("#home_1").delay(8000).animate({ top: 200 + 'px', opacity: "1" }, 1000); 

    var loc = window.location.href; 
    $("nav ul li a").each(function() { 
     if(this.href == loc) { 
     $(this).addClass('current'); 
     } 
    }); 

    $("#home_5").click(function(e) { 
    $(this).toggleClass('stack_top'); 
    $("#home_4,#home_3,#home_2,#home_1").removeClass('stack_top'); 
    }); 
    $("#home_4").click(function(e) { 
    $(this).toggleClass('stack_top'); 
    $("#home_5,#home_3,#home_2,#home_1").removeClass('stack_top'); 
    }); 
    $("#home_3").click(function(e) { 
    $(this).toggleClass('stack_top'); 
    $("#home_4,#home_5,#home_2,#home_1").removeClass('stack_top'); 
    }); 
    $("#home_2").click(function(e) { 
    $(this).toggleClass('stack_top'); 
    $("#home_4,#home_3,#home_5,#home_1").removeClass('stack_top'); 
    }); 
    $("#home_1").click(function(e) { 
    $(this).toggleClass('stack_top'); 
    $("#home_4,#home_3,#home_2,#home_5").removeClass('stack_top'); 
    }); 

}); 

Answer 1

はここで同様の要素のクラスを使用すると、反復コード

/* adding the class would usually be done in your html markup but will add class dymamically here*/ 
$('#home_1, #home_2, #home_3, #home_4, #home_5').addClass('home_class') 

/* one handler for all the elements in class*/ 
$('.home_class').click(function(e) { 

    $('.stack_top').removeClass('stack_top'); 

    $(this).addClass('stack_top'); 
    }); 

Answer 2

それとも、ただ一つのコレクション内のすべてのアイテムを保存し、それをフィルタの多くを保存します例です。

var home = $('#home_1, #home_2, #home_3, #home_4, #home_5'); 

home.click(function() { 
    home.not(this).removeClass('stack_top'); 
    $(this).toggleClass('stack_top'); 
}); 

しかし、代わりにcssクラスの使用を検討する必要があります。

JSフィドル例：http://jsfiddle.net/yF4gp/