Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Czasowe podświetlanie obrazków
Forum PHP.pl > Forum > Po stronie przeglądarki
moto0095
Witam. Już od dobrej godziny szukam w Googlach i nic nie mogę znaleźć.
Mam na stronie 6 obrazków. I teraz chciałbym uzyskać następujący efekt:
Gdy gość kliknie na link "podświetl" to co sekundę podświetli się kolejny obrazek (podświetli: zmieni "border-color" na czerwony).
Trochę sam próbowałem (przy użyciu jQuery) i udało mi się coś takiego uzyskać, ale to podświetli tylko pierwszy obrazek:
  1. <script type="text/javascript">
  2. function str_repeat ( input, multiplier ) {
  3. return new Array(multiplier+1).join(input);
  4. }
  5.  
  6. $(document).ready(function () {
  7. var ile = 6;
  8.  
  9. $('a#ok').click(function pods() {
  10. for(i=0; i<ile; i++) {
  11. view(i);
  12. }
  13. });
  14.  
  15. function view(id) {
  16. $('div#mig img').removeClass('active');
  17. $('div#mig img#m'+id).addClass('active');
  18. setTimeOut('view('+id+')', 1000);
  19. }
  20.  
  21. });


Proszę o pomoc smile.gif
erix
Argh, po co Ci do tego nazywanie każdego obrazka z osobna? Masz przecież metodę eq(), która zwraca obiekt o i-tym indeksie.

Puść to na żywo, trochę za mało informacji.

[JAVASCRIPT] pobierz, plaintext
  1. $('div#mig img').removeClass('active');
  2. $('div#mig img#m'+id).addClass('active');
  3. setTimeOut('view('+id+')', 1000);
[JAVASCRIPT] pobierz, plaintext

Z tego, co widzę, to tylko jedną rundkę zrobi i będzie szukać w nieskończoność. I aż prosi się o metodę eq.
moto0095
Spoko funkcja, ale poza nią co jeszcze trzeba dodać/zmienić questionmark.gif
erix
Przecież napisałem, czego nie rozumiesz?
moto0095
No bo podałeś funkcję eq(); która pozwala pozwala na usunięcie id ale jak mam zrobić aby co sekundę "podświetlał" się kolejny obrazek questionmark.gif
f(x)
Dodać 2 sec ?
zegarek84
chociaż jestem już podchmielony, to jest szansa, że algorytm który chciałeś uzyskać mógłby zadziałąć - a jeśli nie to i tak wskażę najważniejszy błąd który tutaj nie ma prawa bytu ;] [wycinek Twojej funkcji - ale pełna funkcja gdyż chcę coś o zasięgu zmiennych napisać...]:
Kod
function () {
    var ile = 6;
        
         $('a#ok').click(function pods() {
              for(i=0; i<ile; i++) {
                      view(i);
              }
         });        
        
        function view(id) {
              $('div#mig img').removeClass('active');
              $('div#mig img#m'+id).addClass('active');
              setTimeOut('view('+id+')', 1000);
            }    
        
}
dalej w funkcji view która jest już niestety lub stety jeśli chodzi o "hermetyzację kodu" jest już funkcją prywatną nie dostępną z poziomu window... idąc dalej chcałeś zrobić rekurencje "setTimeOut('view('+id+')', 1000);".... ale eval jest zły ];-> - fakt może nie bezpośredni ale masz tam eval'a - a z eval'a dostęp do zmiennych masz z poziomu tylko window - jeśli wewnątrz funkcji poprzedzisz zmienną przez var lub funkcje zadeklarujesz wewnątrz funkcji to są "rzeczy" prywatne których nie ma w window... na szybjko na to obejście i teraz Ci nie wytłumacze gdyż o tym można by więcej napisać to przekazanie anonimowej funkcji:
setTimeOut(function(){view(id);}, 1000);

lub jeśli bedziesz ciekaw i poeksperymwntujesz to można jeszcze funkcje bez wywołania przekazywać do setTimeout lub metody obiektów [czyli funkcje] na zasadzie np.:
setTimeOut(view, 1000);
wiem - brakuje Ci parametru - poczytaj o zasięgu zmiennych to znajdziesz rozwiązanie...

ps tak dodatkowo - w js funkcje są obiektami, ale obiekty nie są funkcjami [dopiero ich metody dostępowe mogą być funkcjami] - wiem, może trochu teraz zakręciłem ale jak się zrozumie js i zasięg zmiennych to ten język staje się lekki i wygodny... a na potwierdzenie tego co napisałęm sprawdź sobie instancje obiektu i funkcji przez alert(X instanceof Object|Function); - pewniem literówkę walnał ;p - sorki ale pisz ę tylko hobbistycznie i za dużo tego dobrego "miodu" ;]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.