Javascript 合并goofy jquery代码

大家好，斯塔克兰德的人

不久前，我为我的一个朋友做了一个网站，我在他的网站首页上做了这个奇怪的jquery代码。简短的故事是，他首先想要一个淡入淡出的面板，上面的导航分别突出显示顶部导航和面板淡入淡出。我几乎没有时间更改HTML和图形，因此我别无选择，只能在jquery中使用每个单独的按钮进行更改。所以我的问题是。。。。。。如果我有7个或更多的按钮，有没有办法合并这段代码

谢谢你的帮助。代码在底部

$(".block1").css({ opacity: 0.5 });
$(".home").css({ backgroundPosition: '0px 0px' });
$(".home").hover(function(){
    $(".home").css({backgroundPosition: '0px -33px'});
    $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
    },
    function() {
    $(".home").css({backgroundPosition: '0px 0px'});
    $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});

$(".block1").css({ opacity: 0.5 });
$(".home").css({ backgroundPosition: '0px 0px' });
$(".block1").hover(function(){
    $(".home").css({backgroundPosition: '0px -33px'});
    $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
    },
    function() {
    $(".home").css({backgroundPosition: '0px 0px'});
    $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});

$(".home").click(function(){
    $(window).unload( function () {
        $(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5});
        $(".home").css({backgroundPosition: '0px 0px'});
    });
});
$(".block1").click(function(){
    $(window).unload( function () {
        $(".home").css({backgroundPosition: '0px 0px'});
        $(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5});
    });
});

HTML:

---

由于您使用的是类，因此存在一些冗余。我认为这巩固了它：

var block1Classes = $(".block1");
var homeClasses = $(".home");
var block1HomeClasses = $(".home, .block1");

block1Classes.css({ opacity: 0.5 });
homeClasses.css({ backgroundPosition: '0px 0px' });
block1HomeClasses.hover(function(){
    homeClasses.css({backgroundPosition: '0px -33px'});
    block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
    },
    function() {
    homeClasses.css({backgroundPosition: '0px 0px'});
    block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});

block1HomeClasses.click(function(){
    $(window).unload( function () {
        block1Classes.css({backgroundPosition: '0px -250px', opacity: 0.5});
        homeClasses.css({backgroundPosition: '0px 0px'});
    });
});

---

此外，以善良与和谐的名义，缓存一些jQuery查询！！如果我有7个或更多按钮，我是否必须使用数组？@rosscj2533此外，更短的变量名将提高可读性。@blackbull77-如果您的按钮使用与现有按钮相同的类，这将很好地工作。如果您现有的按钮使用

home

类，并且您正在使用

button

类添加新按钮，那么您只需更改初始选择器来选择按钮类-

var homeclass=$（'.home，.button'）。（在这种情况下，您可能会想更改变量名）。@Šime Vidas-我同意，但我的回答是为了清楚起见。如果需要的话，OP可以减少这些名称。是每个按钮的块号改变了，还是每个按钮都有其他不同的参数？每个按钮都有不同的参数。
a.home{
    width:88px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) 0px 0px no-repeat;}
a:hover.home{
    background:url(../graphx/sprite-navs.png) 0px -33px no-repeat;}
a.chefs{
    width:87px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -88px 0px no-repeat;}
a:hover.chefs{
    background:url(../graphx/sprite-navs.png) -88px -33px no-repeat;}
a.products{
    width:90px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -175px 0px no-repeat;}
a:hover.products{
    background:url(../graphx/sprite-navs.png) -175px -33px no-repeat;}
a.shopping{
    width:89px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -265px 0px no-repeat;}
a:hover.shopping{
    background:url(../graphx/sprite-navs.png) -265px -33px no-repeat;}
a.events{
    width:88px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -354px 0px no-repeat;}
a:hover.events{
    background:url(../graphx/sprite-navs.png) -354px -33px no-repeat;}
a.contact{
    width:82px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -442px 0px no-repeat;}
a:hover.contact{
    background:url(../graphx/sprite-navs.png) -442px -33px no-repeat;}
a.friends{
    width:88px;
    height:33px;
    text-align:center;
    background:url(../graphx/sprite-navs.png) -524px 0px no-repeat;}
a:hover.friends{
    background:url(../graphx/sprite-navs.png) -524px -33px no-repeat;}

a.block1{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) 0px -250px no-repeat;
    height:250px;
    width:88px;
    opacity: 0.5;}
a:hover.block1{
    background:url(../graphx/sprite-pages.png) 0px -250px no-repeat;}
a.block2{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -88px -250px no-repeat;
    height:250px;
    width:87px;
    opacity: 0.5;}
a:hover.block2{
    background:url(../graphx/sprite-pages.png) -88px -250px no-repeat;}
a.block3{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -175px -250px no-repeat;
    height:250px;
    width:90px;
    opacity: 0.5;}
a:hover.block3{
    background:url(../graphx/sprite-pages.png) -175px -250px no-repeat;}
a.block4{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -265px -250px no-repeat;
    height:250px;
    width:89px;
    opacity: 0.5;}
a:hover.block4{
    background:url(../graphx/sprite-pages.png) -265px -250px no-repeat;}
a.block5{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -354px -250px no-repeat;
    height:250px;
    width:88px;
    opacity: 0.5;}
a:hover.block5{
    background:url(../graphx/sprite-pages.png) -354px -250px no-repeat;}
a.block6{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -442px -250px no-repeat;
    height:250px;
    width:82px;
    opacity: 0.5;}
a:hover.block6{
    background:url(../graphx/sprite-pages.png) -442px -250px no-repeat;}
a.block7{
    display:block;
    text-indent:-9999px;
    background:url(../graphx/sprite-pages.png) -524px -250px no-repeat;
    height:250px;
    width:88px;
    opacity: 0.5;}
a:hover.block7{
    background:url(../graphx/sprite-pages.png) -524px -250px no-repeat;}

var block1Classes = $(".block1");
var homeClasses = $(".home");
var block1HomeClasses = $(".home, .block1");

block1Classes.css({ opacity: 0.5 });
homeClasses.css({ backgroundPosition: '0px 0px' });
block1HomeClasses.hover(function(){
    homeClasses.css({backgroundPosition: '0px -33px'});
    block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
    },
    function() {
    homeClasses.css({backgroundPosition: '0px 0px'});
    block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});

block1HomeClasses.click(function(){
    $(window).unload( function () {
        block1Classes.css({backgroundPosition: '0px -250px', opacity: 0.5});
        homeClasses.css({backgroundPosition: '0px 0px'});
    });
});