ugrás a tartalomhoz

jQuery kód ismétlése?

zoliky · 2009. Júl. 9. (Cs), 23.45
Hello,
Van egy HTML kod:

<ul>
    <li><a href="#" class="button1">Home</a></li>
    <li><a href="#" class="button2">About</a></li>
    <li><a href="#" class="button3">News</a></li>
</ul>
Ha megerintem az egerel az egyik elemet (peldaul: Home, About vagy News) szeretnek egy kodot lefutatni:

$(document).ready(function() {
  $('.button1')
        .mouseover(function() {
                $(this).stop().animate({backgroundPosition:"(0px -50px)"}, {duration: 500})
...
Mukodik a kod csak az a problema, hogy a "button2"-ot meg a "button3"-at is be kene izitani:

button1: $(this).stop().animate({backgroundPosition:"(0px -50px)"}, {duration: 500})
button2: $(this).stop().animate({backgroundPosition:"(0px -100px)"}, {duration: 500})
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
<ul class="buttons">  
  <li><a href="#" class="button1">Home</a></li>  
  <li><a href="#" class="button2">About</a></li>  
  <li><a href="#" class="button3">News</a></li>  
</ul>
$(document).ready(function() {
  var x = $('.buttons a');
  x.mouseover(function(){ 
    $(this).stop().animate(
      {'backgroundPosition' : '(0px -'+ (50 * x.index(this)) +'px)'}, 
      {duration: 500}) 
  });
});
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:

$('a').hover(
   function(e) {
     var offset = $(this).offset();
     e.stopPropagation();
Szerintem logikus, mert az "A" elem kordinatajat tartalmazza. A jQuery nem tudja, hogy az A elemnek van egy hattere.

ul a {
  line-height: 2.1em;
  text-decoration: none;
  display: block;
  padding: 0 2em;
  color: #fff;
  background:url(menubg.jpg) no-repeat;
}
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:

$(document).ready(function() {
  $('.buttons a')
    .css({backgroundPosition: '-200px -0'})
  	.mouseover(function() {
  	  var index = $('.buttons a').index(this);
  	  $(this).stop().animate({backgroundPosition:"(-" + 200 * index + "px -50px)"}, {duration: 600})
  })
});
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:

.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
var links = $('.buttons a');
links.each(function () {
  var index = links.index(this);
  // itt csinalsz akarmit
}).mouseover(function() {  
  var index = links.index(this);  
  $(this).stop().animate({backgroundPosition:"(-" + 200 * index + "px -50px)"}, {duration: 600})  
});
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:

  <ul class="buttons">
    <li><a href="#" class="first">Home</a></li>  // index 0
    <li><a href="#">About</a></li>               // index 1
    <li><a href="#">News</a></li>                // index 2
    <li><a href="#">Services</a></li>            // index 3
    <li><a href="#">Contact</a></li>             // index 4
  </ul>
  
  <ul class="buttons">
    <li><a href="#" class="first active">Home</a></li>     // index 5
    <li><a href="#">About</a></li>                         // index 6
    <li><a href="#">News</a></li>                          // index 7
    <li><a href="#">Services</a></li>                      // index 8
    <li><a href="#">Contact</a></li>                       // index 9
  </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!