ugrás a tartalomhoz

jQuery kód ismétlése?

zoliky · 2009. Júl. 9. (Cs), 23.45
Hello,
Van egy HTML kod:
  1. <ul>  
  2.     <li><a href="#" class="button1">Home</a></li>  
  3.     <li><a href="#" class="button2">About</a></li>  
  4.     <li><a href="#" class="button3">News</a></li>  
  5. </ul>  
Ha megerintem az egerel az egyik elemet (peldaul: Home, About vagy News) szeretnek egy kodot lefutatni:
  1. $(document).ready(function() {  
  2.   $('.button1')  
  3.         .mouseover(function() {  
  4.                 $(this).stop().animate({backgroundPosition:"(0px -50px)"}, {duration: 500})  
  5. ...  
Mukodik a kod csak az a problema, hogy a "button2"-ot meg a "button3"-at is be kene izitani:
  1. button1: $(this).stop().animate({backgroundPosition:"(0px -50px)"}, {duration: 500})  
  2. button2: $(this).stop().animate({backgroundPosition:"(0px -100px)"}, {duration: 500})  
  3. button3: $(this).stop().animate({backgroundPosition:"(0px -150px)"}, {duration: 500})  
Ez is mukodik de mi van akkor ha peldaul 20 menu item van vagy mindig hozza adok egy elemet a HTML kodhoz, a jQuery-t is modositani kell?

Koszonom!
‹ "Automatikus" bejelentkezés Próbáljuk a kódot átnézni ›
 ■
1

index, selector

Poetro · 2009. Júl. 10. (P), 00.15
  1. <ul class="buttons">    
  2.   <li><a href="#" class="button1">Home</a></li>    
  3.   <li><a href="#" class="button2">About</a></li>    
  4.   <li><a href="#" class="button3">News</a></li>    
  5. </ul>  
  1. $(document).ready(function() {  
  2.   var x = $('.buttons a');  
  3.   x.mouseover(function(){   
  4.     $(this).stop().animate(  
  5.       {'backgroundPosition' : '(0px -'+ (50 * x.index(this)) +'px)'},   
  6.       {duration: 500})   
  7.   });  
  8. });  
Valami ilyesmi.
2

Vagy ha nem biztos az 50px

Ustak · 2009. Júl. 10. (P), 08.22
Akkor itt nézz szét, így nem kell fixen beleégetni a gombok pozícióját
jquery-css
például az offset() függvényt merném javasolni.
Üdv:
Gábor
3

Koszonom a hasznos

zoliky · 2009. Júl. 10. (P), 12.51
Koszonom a hasznos tanacsokat!
Nem a gombok poziciojat akarom megtudni. Egy keprol van szo (CSS Sprite), amely a menu hattere. Nem tudom ha erre is megfelel az "offset", probaltam igy de mas erteket kapok:
  1. $('a').hover(  
  2.    function(e) {  
  3.      var offset = $(this).offset();  
  4.      e.stopPropagation();  
Szerintem logikus, mert az "A" elem kordinatajat tartalmazza. A jQuery nem tudja, hogy az A elemnek van egy hattere.
  1. ul a {  
  2.   line-height: 2.1em;  
  3.   text-decoration: none;  
  4.   display: block;  
  5.   padding: 0 2em;  
  6.   color: #fff;  
  7.   background:url(menubg.jpg) no-repeat;  
  8. }  
Szerintem ilyen esetben "Poetro" peldaja sem mukodik. Elnezest valoszinuleg nem irtam le rendesen a problemat az elso post-ban.
4

Ok, az index jo otletnek

zoliky · 2009. Júl. 11. (Szo), 13.36
Ok, az index jo otletnek tunik:
  1. $(document).ready(function() {  
  2.   $('.buttons a')  
  3.     .css({backgroundPosition: '-200px -0'})  
  4.     .mouseover(function() {  
  5.       var index = $('.buttons a').index(this);  
  6.       $(this).stop().animate({backgroundPosition:"(-" + 200 * index + "px -50px)"}, {duration: 600})  
  7.   })  
  8. });  
A problema az, hogy az index erteket csak egy esemeny utan tudom meg, peldaul "mouseover", es nekem alkalmazni kene a megkapot erteket a kovetkezo sorra:
  1. .css({backgroundPosition: '-200px -0'})  
Ok, biztos azt fogjatok mondani, hogy rakjam be a .css() sort az esemenybe de akkor mar nem ugy mukodik a szkript ahogy szeretnem, mert a .css() ujbol es ujbol lefut ha ramegyek az egerel a linkre.
5

index

Poetro · 2009. Júl. 11. (Szo), 15.05
  1. var links = $('.buttons a');  
  2. links.each(function () {  
  3.   var index = links.index(this);  
  4.   // itt csinalsz akarmit  
  5. }).mouseover(function() {    
  6.   var index = links.index(this);    
  7.   $(this).stop().animate({backgroundPosition:"(-" + 200 * index + "px -50px)"}, {duration: 600})    
  8. });  
6

Koszonom! Nem tudom mennyire

zoliky · 2009. Júl. 12. (V), 14.00
Koszonom!
Nem tudom mennyire jo otlet az index hasznalata, mert ket menuvel:
  1. <ul class="buttons">  
  2.   <li><a href="#" class="first">Home</a></li>  // index 0  
  3.   <li><a href="#">About</a></li>               // index 1  
  4.   <li><a href="#">News</a></li>                // index 2  
  5.   <li><a href="#">Services</a></li>            // index 3  
  6.   <li><a href="#">Contact</a></li>             // index 4  
  7. </ul>  
  8.   
  9. <ul class="buttons">  
  10.   <li><a href="#" class="first active">Home</a></li>     // index 5  
  11.   <li><a href="#">About</a></li>                         // index 6  
  12.   <li><a href="#">News</a></li>                          // index 7  
  13.   <li><a href="#">Services</a></li>                      // index 8  
  14.   <li><a href="#">Contact</a></li>                       // index 9  
  15. </ul>  
Ha megfigyeled a masodik menut nem kezdi az indexelest nullatol. Ez pedig nagy baj. A CSS sprite-bol a kepeket az index szam alapjan szedem ki.

Ha lenne egy otleted nagyon orulnek! Es koszonom a sok segitseget!