Απορία για loop σε links

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από chchrist » 27 Ιουν 2006 15:56

Έχω γράψει αυτόν τον κώδικα.

Κώδικας: Επιλογή όλων

window.onload = function() {

  var image = document.getElementById("placeholder");

  if(!image) return false;

  image.style.backgroundPosition = "0px 50%";

  var shirts = document.getElementById("colors");

  var shirt_links = shirts.getElementsByTagName("a");

  for&#40;var i=0; i<shirt_links.length; i++&#41; &#123;

   shirt_links&#91;i&#93;.onmouseover = function&#40;&#41; &#123;

    image.style.backgroundPosition =  "-250px";

    &#125;

  &#125;

&#125;
Βρίσκω όλα τα λινκς μέσα στο element με το id="colors" και θέλω να μετακινώ το element με το id="placeholder" 250px κάθε φορά. Δηλαδή το πρώτο link να είναι 0px το δεύτερο να το μετακινεί 250 το τρίτο 500 το τέτερτο 750 k.o.k

Σκέφτηκα να κάνω μια μεταβλητή πχ var position = i*250 μέσα στην onmouseover function αλλά μου βγάζει το σύνολο. δλδ αν όλα τα links είναι 7 μου βγάζει 1750....

Δεν μου έρχετε τώρα πως να το προχωρήσω.... :-?

Καμιά ιδέα;

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από cherouvim » 27 Ιουν 2006 22:19

Mesa sto function pou orizeis sto onmouseover, to reference gia to image yparxei?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Απορία για loop σε links

Δημοσίευση από skeftomilos » 28 Ιουν 2006 03:52

Η μεταβλητή image διατηρείται γιατί η εξωτερική function είναι closure. Το ίδιο και η i, με τη διαφορά ότι έχει διατηρήσει την τελευταία τιμή μετά την έξοδο από το loop.

Μια λύση είναι να προστεθεί μια αυθαίρετη ιδιότητα σε κάθε link, π.χ. index. Μετά μέσα στο σώμα της onmouseover να διαβάζεται αυτή η ιδιότητα:

Κώδικας: Επιλογή όλων

for &#40;var i = 0; i < shirt_links.length; i++&#41; &#123;
  shirt_links&#91;i&#93;.index = i
  shirt_links&#91;i&#93;.onmouseover = function&#40;&#41; &#123;
    image.style.backgroundPosition = &#40;-this.index * 250&#41; + 'px';
  &#125;
&#125;
Ωστόσω υπάρχει πιθανότητα να προκύψουν memory-leaks στον IE. Για σιγουριά καλό θα είναι να γίνει αποσύνδεση των DOM elements από κάθε αναφορές με στοιχεία JS στο συμβάν window.onunload.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από cherouvim » 28 Ιουν 2006 05:40

Pia einai i "eksoteriki function"?

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από chchrist » 28 Ιουν 2006 08:43

Λοιπόν το άλλαξα τελείως το script και δουλεύει αν και δεν νομίζω πως πέτυχαίνω graceful degradation....

έβαλα στα link μια μεταβλητή.

PHP:

Κώδικας: Επιλογή όλων


for&#40;$i=0;$i<$countcolor;$i++&#41; &#123;
   echo "<td ><a href=\"\" title=\"επιλογή χρώματος\" onmouseover=\"colorChange&#40;$i&#41;\">$color&#91;$i&#93;</a></td>";
 &#125;
και μετά έγραψα αυτή την function

JAVASCRIPT:

Κώδικας: Επιλογή όλων


function colorChange&#40;whichcolor&#41; &#123;

var image = document.getElementById&#40;"placeholder"&#41;;

if&#40;!image&#41; return false;

image.style.backgroundPosition = "0px 50%";

  var dis = 250*whichcolor;

  image.style.backgroundPosition = "-"+dis+"px 50%";

   &#125;

window.onload = colorChange;
Και δουλεύει μια χαρά. :)

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από cherouvim » 28 Ιουν 2006 10:23

Sti function pou egrapses, to window.onload = colorChange; den hriazetai.

Episis to "δεν νομίζω πως πέτυχαίνω graceful degradation" den teriazei katholou me to "μια χαρά" :)

Live demo @ http://temp.cherouvim.com/forums/onmouseover - optimized meta tin, klasiki pleon, epifotisi tou skeftomilou.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Απορία για loop σε links

Δημοσίευση από skeftomilos » 29 Ιουν 2006 02:44

Πλάκα έχει το demo! :) Εξωτερική είναι η ανώνυμη function που καλείται στο window.onload, αλλά έκανα λάθος, closures είναι οι εσωτερικές functions. Closures λέγονται οι functions που επεκτείνουν το scope τους έξω επό το σώμα τους, μέχρι τα όρια της function που τις περιέχει. Είναι built-in χαρακτηριστικό της JavaScript.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από chchrist » 29 Ιουν 2006 17:18

Το έκανα με το τρόπο του skeftomilou τελικά μετά και απο το χαρακτηριστικό demo του cherouvim. :P

Τώρα ξεκίνησα να δουλεύω πάνω στο animation χρησιμοποιώντας setTimeout() και clearTimeout() γιατί τώρα απλά αλλάζει εικόνες στιγμιαία ενώ εγώ θέλω να κάνει scroll σε κάθε εικόνα.

Δεν έχω ξανακάνει animation με javascript οπότε θα σας ξαναχρειαστώ.. :)

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Απορία για loop σε links

Δημοσίευση από chchrist » 30 Ιουν 2006 23:23

Βρήκα μια ωραία function που κάνει queue τις functions κατα το window.onload :D

Πιστεύω είναι αρκετά χρήσιμη. addLoadEvent

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης