[JQuery] problem z automatyzacją galerii

Nie wiedziałem gdzie napisać ten temat to postanowiłem że tutaj spróbuje. Jest to jeden z elementów www więc na pewno ktoś będzie coś wiedział na ten temat. Chodzi mi o JQuery. Mam pewien problem. Chodzi o to że mam animacje w które pokazuje mi 4 obrazki i linki do tych obrazków i animacja wygląda okej. Tutaj nie miałem problemu. Jednak chce to zautomatyzować czyli nie podawać jak dotychczas (zdjęcie1, zdjęcie2, zdjęcie3, zdjęcie4, pierwszy, drugi, trzeci)

<script type="text/javascript">
$(document).ready(function(){




$(".pierwszy").click(function(){

$(".zdjecie2").fadeOut(0.1)
$(".zdjecie3").fadeOut(0.1)
$(".zdjecie4").fadeOut(0.1)
$(".zdjecie1").delay(600).fadeIn(1);

});
$(".drugi").click(function(){

$(".zdjecie1").fadeOut(1)
$(".zdjecie3").fadeOut(1)
$(".zdjecie4").fadeOut(1)

$(".zdjecie2").delay(600).fadeIn(1);

});
$(".trzeci").click(function(){

$(".zdjecie1").fadeOut(1)
$(".zdjecie2").fadeOut(1)
$(".zdjecie4").fadeOut(1)

$(".zdjecie3").delay(600).fadeIn(1);

});
$(".czwarty").click(function(){

$(".zdjecie1").fadeOut(1)
$(".zdjecie2").fadeOut(1)
$(".zdjecie3").fadeOut(1)

$(".zdjecie4").delay(600).fadeIn(1);
});

});

 

<div id="kwadrat">
<div class="linki">
<a href ="#" class="pierwszy">1</a>
<a href ="#" class="drugi">2</a>
<a href ="#" class="trzeci">3</a>
<a href ="#" class="czwarty">4</a>
</div>
<div class="zdjecie1"><img src="grafika\s1.jpg" height="180" weidth="200"/></div>
<div class="zdjecie2"><img src="grafika\s2.jpg" height="180" weidth="200"/></div>
<div class="zdjecie3"><img src="grafika\s3.jpg" height="180" weidth="200"/></div>
<div class="zdjecie4"><img src="grafika\s4.jpg" height="180" weidth="200"/></div>
</div>

Chce coś takiego ale nie wiem jak to napisać(nie wiem jak takiego coś pisze sie w jquery):

Zlicza mi wszystkie linki[i].

Zlicza mi wszystkie zdjecie[i]

chce aby animacja działała też po załadowaniu strony. Tutaj tylko podać zdarzenie jakie to wykonuje dalej będę wiedział jak oprogramować

////cos takiego tylko że wiem że jest to zle ;/ ale osoba co wie o co chodzi pomoże.

$(".p[1]").click(function(){

$(".zdjecie[1]").fadeOut(0.1)
$(".zdjecie[2]").fadeOut(0.1)
$(".zdjecie[3]").fadeOut(0.1)
$(".zdjecie[4]").delay(600).fadeIn(1);

});
</cod>
 

itp.

 

Bardzo proszę o pomoc

Dobrze, że widzisz tu problem, bo jest on bardzo istotny. Taki kod, z takimi powtórzeniami, łamie zasadę <url=>DRY</url> -- jedną z najważniejszych zasad programistycznych.

Kolejny istotny problem masz z wysławianiem się. Piszesz o jakichś elementach p, w ostatnim kodzie pojawia się nawet p w selektorze. Ale skąd ono się wzięło? Gdzie ono ma być? Co ma otaczać? Wszystkie zdjęcia mają być zamknięte w p? Może cały zestaw linki+zdjęcia ma być w p, a takich zestawów chcesz mieć kilka? (tak nie możesz, to nieprawidłowy kod, w środku p nie może być div-a)

Nie mam też pojęcia o co Ci chodzi z tym zliczaniem. Musisz używać lepszych określeń. Wiesz co to znaczy "zliczać"? Coś w stylu policzyć. Po prostu. Chcesz, żeby Twój kod policzył wszystkie p? No to policzy i wyjdzie mu, że jest ich 5. I tyle. Nic więcej. Sam ten fakt, że wiesz o istnieniu 5 paragrafów czy 5 czegokolwiek innego, czyli samo zliczenie, nic Ci nie daje. Dlatego jestem przekonany, że chodzi Ci o coś innego niż zliczanie i że się źle wyrażasz.

I drobniejsze bugi:
-Na końcu linii (w zasadzie: instrukcji) w JavaScripcie wstawiaj średnik. Co prawda jest on tam automatycznie dodawany przez język, ale nie należy z tego korzystać. Zresztą, gdzieniegdzie masz średniki, gdzieniegdzie nie, a to wygląda bez sensu.
-Przy elementach img masz "weidth", a powinno być "width".

bswierczynski napisał(a)

Dobrze, że widzisz tu problem, bo jest on bardzo istotny. Taki kod, z takimi powtórzeniami, łamie zasadę <url=>DRY</url> -- jedną z najważniejszych zasad programistycznych.

Kolejny istotny problem masz z wysławianiem się. Piszesz o jakichś elementach p, w ostatnim kodzie pojawia się nawet p w selektorze. Ale skąd ono się wzięło? Gdzie ono ma być? Co ma otaczać? Wszystkie zdjęcia mają być zamknięte w p? Może cały zestaw linki+zdjęcia ma być w p, a takich zestawów chcesz mieć kilka? (tak nie możesz, to nieprawidłowy kod, w środku p nie może być div-a)

Nie mam też pojęcia o co Ci chodzi z tym zliczaniem. Musisz używać lepszych określeń. Wiesz co to znaczy "zliczać"? Coś w stylu policzyć. Po prostu. Chcesz, żeby Twój kod policzył wszystkie p? No to policzy i wyjdzie mu, że jest ich 5. I tyle. Nic więcej. Sam ten fakt, że wiesz o istnieniu 5 paragrafów czy 5 czegokolwiek innego, czyli samo zliczenie, nic Ci nie daje. Dlatego jestem przekonany, że chodzi Ci o coś innego niż zliczanie i że się źle wyrażasz.

I drobniejsze bugi:
-Na końcu linii (w zasadzie: instrukcji) w JavaScripcie wstawiaj średnik. Co prawda jest on tam automatycznie dodawany przez język, ale nie należy z tego korzystać. Zresztą, gdzieniegdzie masz średniki, gdzieniegdzie nie, a to wygląda bez sensu.
-Przy elementach img masz "weidth", a powinno być "width".

Pomyliłem się tutaj z width a średniki też będę już wstawiał. Co do zliczania masz racje o to mi chodziło. Ja wiem że mam 5 paragrafów. Teraz dodam kolejnych 20 paragrafów to doliczy do 25 i tyle razy się wykona. Z tym "P" rzeczywiście wcześniej pisałem ale zmieniłem zdanie. Postaram się skasować by nie wprowadzać w błąd.

mając zliczone paragrafy tak jak i linki będę mógł to zautomatyzować. Chodzi o to że jak będzie kolejne link[i] zejdzie mi niżej i zapamięta że jest nowa wartość i ją wykona.

autor napisał(a)

Co do zliczania masz racje o to mi chodziło.

Czyli o co? Ja podałem kilka możliwych wyjaśnień.

autor napisał(a)

Ja wiem że mam 5 paragrafów. Teraz dodam kolejnych 20 paragrafów to doliczy do 25 i tyle razy się wykona.

Widzisz, i tu jest pies pogrzebany. Nie chodzi o to, by je zliczył, tylko by wykonał jakąś akcję dla np. każdego paragrafu. A może da się napisać tak, że w ogóle nie trzeba będzie ich liczyć?

autor napisał(a)

Z tym "P" rzeczywiście wcześniej pisałem ale zmieniłem zdanie. Postaram się skasować by nie wprowadzać w błąd.

Gah, to jak w końcu jest? W ostatnim poście znowu piszesz o tych paragrafach. Zmieniłeś zdanie, czyli ma ich nie być? Czy mają być? A jeśli mają być, to gdzie? Pokaż kod (HTML!). Pokaż, gdzie mają lądować kolejne paragrafy.

Widzisz, ja teraz muszę już lecieć. Jakbyś napisał od razu bardziej precyzyjnie to może wcześniej mógłbym coś pomóc... Tak czy siak, dokładniejsze wyjaśnienie przyda się tu każdej osobie, która będzie to chciała ogarnąć.

bswierczynski napisał(a)

autor napisał(a)

Co do zliczania masz racje o to mi chodziło.

Czyli o co? Ja podałem kilka możliwych wyjaśnień.

autor napisał(a)

Ja wiem że mam 5 paragrafów. Teraz dodam kolejnych 20 paragrafów to doliczy do 25 i tyle razy się wykona.

Widzisz, i tu jest pies pogrzebany. Nie chodzi o to, by je zliczył, tylko by wykonał jakąś akcję dla np. każdego paragrafu. A może da się napisać tak, że w ogóle nie trzeba będzie ich liczyć?

autor napisał(a)

Z tym "P" rzeczywiście wcześniej pisałem ale zmieniłem zdanie. Postaram się skasować by nie wprowadzać w błąd.

Gah, to jak w końcu jest? W ostatnim poście znowu piszesz o tych paragrafach. Zmieniłeś zdanie, czyli ma ich nie być? Czy mają być? A jeśli mają być, to gdzie? Pokaż kod (HTML!). Pokaż, gdzie mają lądować kolejne paragrafy.

Widzisz, ja teraz muszę już lecieć. Jakbyś napisał od razu bardziej precyzyjnie to może wcześniej mógłbym coś pomóc... Tak czy siak, dokładniejsze wyjaśnienie przyda się tu każdej osobie, która będzie to chciała ogarnąć.

Teraz powinno być bardziej widoczne o co mi chodzi. Powinno zliczyć ile jest li w .strona i tyle razy wykonać to zadanie. Problem będzie teraz z javaScript jak to zautomatyzować.

<ul class="strona">
						<li>
							<div class="zdjecie"><img src="grafika\s1.jpg" height="180" width="200"/></div>
							<a class="thumb" name="leaf" href="grafika\s1.jpg" title="1">1</a>
						</li>
						
						<li>
							<div class="zdjecie"><img src="grafika\s2.jpg" height="180" width="200"/></div>
							<a class="thumb" name="leaf" href="grafika\s2.jpg" title="1">2</a>
						</li>
						
						<li>
							<div class="zdjecie"><img src="grafika\s3.jpg" height="180" width="200"/></div>
							<a class="thumb" name="leaf" href="grafika\s3.jpg" title="1">3</a>
						</li>
						
						<li>
							<div class="zdjecie"><img src="grafika\s4.jpg" height="180" width="200"/></div>
							<a class="thumb" name="leaf" href="grafika\s4.jpg" title="1">4</a>
						</li>
						
						<li>
							<div class="zdjecie"><img src="grafika\s5.jpg" height="180" width="200"/></div>
							<a class="thumb" name="leaf" href="grafika\s5.jpg" title="1">5</a>
						</li>
</ul>

Tutaj mniej więcej jak powinno teraz to schematycznie wyglądać "Kod jest przykładem nie działającym chce to zrobić w Jquery":

<script type="text/javascript">
$(document).ready(function(){

int ZliczWiersze=0;

///tutaj zlicza wiersze np. 25 <li></li>

for(int i=0; i <=25; i++) //wykonuje 25 razy
{
$(".zdjecie").click(function(){ //schodząc co raz niżej tworzy 25 zdarzeń przycisku zjecie
                
                for(int j=0; i <=25; j++) //zlicza 25 zdjęć 24 musi wyłączyć czyli na FadeOUT a to co ma być widoczne będzie na fadein. 
                {
                if([i]!=[j])
                     {
                      $(".zdjecie[j]").fadeOut(0.1)
                      }
                else
                      {
                       $(".thumb[i]").delay(600).fadeIn(1);
                       }

});
}

Dobra, tak na szybko przerobiłem Ci kod, pisząc JavaScript od nowa (zostawiłem tylko te dosyć dziwne fadeIn/fadeOut z małym opóźnieniem). Nie wiem, czy na pewno o to chodziło, ale tak myślę. Zamieszczam kod całego przykładowego dokumentu HTML (to HTML5, ale równie dobrze możesz to zaadaptować do XHTML-a):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>4programmers.net: [JQuery] problem z automatyzacją galerii</title>
    <script src=".lib/jquery-latest.js"></script>
    <style>
      img { display: block; width: 100px; height: 80px; border: 5px solid red; margin-bottom: 10px; }
      ul { list-style: none; }
    </style>
    <script>

$(document).ready(function() {
  var $pojemnik = $('#kwadrat')
  ,   $zdjecia  = $pojemnik.find('.zdjecia img')
  ,   $linki    = $pojemnik.find('.linki a')
  ;

  $linki.each(function(numerLinka, link) {
    $(link).click(function() {
      pokaz_tylko_zdjecie_numer(numerLinka);
    });
  });
  pokaz_tylko_zdjecie_numer(0);

  function pokaz_tylko_zdjecie_numer(numerZdjeciaDoPokazania) {
    $zdjecia.each(function(numerZdjecia, zdjecie) {
      if (numerZdjecia === numerZdjeciaDoPokazania) {
        $(zdjecie).delay(600).fadeIn(1);
      } else {
        $(zdjecie).fadeOut(1);
      }
    });
  }
});
    </script>
  </head>
  <body>
    <h1>[JQuery] problem z automatyzacją galerii</h1>
    <div id="kwadrat">
      <div class="linki">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
      </div>
      <ul class="zdjecia">
        <li><img src=".sample/img/1.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/2.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/3.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/4.jpg" height="180" width="200" /></li>
      </ul>
    </div>
  </body>
</html>

Zauważ, że nigdzie nie ma czegoś takiego jak "zliczanie zdjęć". Przynajmniej nie explicite. Pracujemy nad obiektami jQuery, które reprezentują zbiory elementów. Żeby się przez nie iterować, wykorzystujemy funkcje typu each. Nie ma potrzeby pisania, że wykonujemy coś "dla elementów o numerach od 0 do 25". Mówimy raczej: "dla każdego elementu [ze zbioru zdjęć albo np. linków] zrób to".

Normalnie nie dajemy tu ludziom gotowych rozwiązań, ale Ty już jedno miałeś, tyle że -- jak zauważyłeś -- kiepsko i nieelastycznie napisane. Mam nadzieję, że zachęci Cię to do nauki zarówno jQuery (które sprawiło, że tu nawet nie musieliśmy niczego zliczać!), jak i JavaScriptu, jak i programowania jako takiego. Bo tu w zasadzie mamy programowanie strukturalne i funkcyjne.

bswierczynski napisał(a)

Dobra, tak na szybko przerobiłem Ci kod, pisząc JavaScript od nowa (zostawiłem tylko te dosyć dziwne fadeIn/fadeOut z małym opóźnieniem). Nie wiem, czy na pewno o to chodziło, ale tak myślę. Zamieszczam kod całego przykładowego dokumentu HTML (to HTML5, ale równie dobrze możesz to zaadaptować do XHTML-a):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>4programmers.net: [JQuery] problem z automatyzacją galerii</title>
    <script src=".lib/jquery-latest.js"></script>
    <style>
      img { display: block; width: 100px; height: 80px; border: 5px solid red; margin-bottom: 10px; }
      ul { list-style: none; }
    </style>
    <script>

$(document).ready(function() {
  var $pojemnik = $('#kwadrat')
  ,   $zdjecia  = $pojemnik.find('.zdjecia img')
  ,   $linki    = $pojemnik.find('.linki a')
  ;

  $linki.each(function(numerLinka, link) {
    $(link).click(function() {
      pokaz_tylko_zdjecie_numer(numerLinka);
    });
  });
  pokaz_tylko_zdjecie_numer(0);

  function pokaz_tylko_zdjecie_numer(numerZdjeciaDoPokazania) {
    $zdjecia.each(function(numerZdjecia, zdjecie) {
      if (numerZdjecia === numerZdjeciaDoPokazania) {
        $(zdjecie).delay(600).fadeIn(1);
      } else {
        $(zdjecie).fadeOut(1);
      }
    });
  }
});
    </script>
  </head>
  <body>
    <h1>[JQuery] problem z automatyzacją galerii</h1>
    <div id="kwadrat">
      <div class="linki">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
      </div>
      <ul class="zdjecia">
        <li><img src=".sample/img/1.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/2.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/3.jpg" height="180" width="200" /></li>
        <li><img src=".sample/img/4.jpg" height="180" width="200" /></li>
      </ul>
    </div>
  </body>
</html>

Zauważ, że nigdzie nie ma czegoś takiego jak "zliczanie zdjęć". Przynajmniej nie explicite. Pracujemy nad obiektami jQuery, które reprezentują zbiory elementów. Żeby się przez nie iterować, wykorzystujemy funkcje typu each. Nie ma potrzeby pisania, że wykonujemy coś "dla elementów o numerach od 0 do 25". Mówimy raczej: "dla każdego elementu [ze zbioru zdjęć albo np. linków] zrób to".

Normalnie nie dajemy tu ludziom gotowych rozwiązań, ale Ty już jedno miałeś, tyle że -- jak zauważyłeś -- kiepsko i nieelastycznie napisane. Mam nadzieję, że zachęci Cię to do nauki zarówno jQuery (które sprawiło, że tu nawet nie musieliśmy niczego zliczać!), jak i JavaScriptu, jak i programowania jako takiego. Bo tu w zasadzie mamy programowanie strukturalne i funkcyjne.

Dzięki za pomoc. Kiedyś byłem przeciw JavaScript jednak jak zobaczyłem nikt kto programuje w ASP.NET czy PHP nie ucieknie przed tym. Jeszcze raz dzięki za pomoc.