Konsolidieren doof jquery Code

Hallo an alle in Stackoverflow Land,Konsolidieren doof jquery Code

Vor einiger Zeit habe ich eine Website für einen Freund von mir und ich habe diese seltsame jQuery-Code für die Titelseite seiner Website. Die kurze Geschichte ist, dass er anfing, ein Einblenden und Ausblenden mit Panels mit der oberen Navigation getrennt zu haben, die sowohl Top-Navigation hervorgehoben als auch die Panels zum Ein- und Ausblenden hatte. Ich hatte wenig Zeit, HTML und Grafiken zu ändern, also habe ich keine andere Wahl, als es mit jeder einzelnen Schaltfläche zu tun. Also meine Frage ist ...... Gibt es eine Möglichkeit, diesen Code so zu konsolidieren, wenn ich 7 oder mehr Tasten habe?

Danke für die Hilfe. Der Code ist auf der Unterseite.

$(".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:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Welcome to Artisserie Bakery</title> 
<link href="styles/styles.css" rel="stylesheet" type="text/css"> 
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script> 
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script> 
<script src="js/hover-navs.js" type="text/javascript"></script> 
<script src="js/preloadCssImages.jQuery_v5.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".art_content-wrapper").fadeIn("slow"); 
    $(".art_content ul li a").preloadCssImages(); 
}); 
</script> 
</head> 

<body> 
<div id="art_wrap"> 
    <div class="art_header"> 
     <a href="index.html"><h1 id="art_logo">Artisserie Bakery</h1></a> 
    </div> 
    <div class="art_nav-wrapper"> 
     <div class="art_nav"> 
      <ul> 
       <li><a class="home" href="home.html">Home</a></li> 
       <li><a class="chefs" href="#">Chefs</a></li> 
       <li><a class="products" href="products.html">Products</a></li> 
       <li><a class="shopping" href="#">Shopping</a></li> 
       <li><a class="events" href="#">Events</a></li> 
       <li><a class="contact" href="#">Contact</a></li> 
       <li><a class="friends" href="#">Friends</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="art_content-wrapper home-page"> 
     <div class="art_content"> 
      <ul> 
       <li><a class="block1" href="home.html">Home</a></li> 
       <li><a class="block2" href="#">Chefs</a></li> 
       <li><a class="block3" href="products.html">Products</a></li> 
       <li><a class="block4" href="#">Shopping</a></li> 
       <li><a class="block5" href="#">Events</a></li> 
       <li><a class="block6" href="#">Contact</a></li> 
       <li><a class="block7" href="#">Friends</a></li> 
      </ul> 
      <br /> 
     <img src="graphx/sprite-footer.png" alt="" border="0" /></div> 

    </div> 
</div> 
</body> 
</html>

CSS:

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;}

Quelle

2010-11-23 blackbull77

Ist es nur die Blocknummer, die sich für jede Schaltfläche ändert oder gibt es andere Parameter, die sich für jeden unterscheiden? – Timbo

Da unterscheiden sich voneinander. – blackbull77

Da Sie Klassen verwenden, gibt es einige Entlassungen. Ich denke, das konsolidiert es:

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'}); 
    }); 
});

Quelle

2010-11-23 14:26:10 rosscj2533

Auch im Namen der Güte und Harmonie, Cache einige dieser jQuery Lookups !! – Pointy

@Pointy, gute Idee, ist das besser nach der Bearbeitung? – rosscj2533

Müsste ich ein Array für sagen verwenden, wenn ich 7 oder mehr Tasten habe? – blackbull77

Konsolidieren doof jquery Code

Antwort

Verwandte Themen