Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]jQUERY nie działa kod z tutoriala.
Forum PHP.pl > Forum > Przedszkole
kosmos
17.03.2015, 19:44:48
Witam,
próbuję zrozumieć jQUERY aby móc zastosować go później w projekcie strony. Znalazłem taki oto kawałek kodu z pewnego kursu, który wklejam poniżej. Po kliknięciu w link więcej, na ekranie powinna wyświetlić się pozostałą treść newsa. Nie mam pojęcia dlaczego to nie działa. Może coś jest nie tak skonfigurowane w systemie? Proszę o pomoc.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <head>
  4. <title>Strona z newsem</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6. <!-- dodanie jQuery do dokumentu -->
  7.  
  8. <script type="text/javascript" src="jQuery.js"></script>
  9.  
  10. <!-- Nasz kod java script: -->
  11.  
  12. <script type="text/javascript">
  13.  
  14. 	$(document).ready(
  15. 	function()
  16. 	{	
  17. 		$("#link").click(
  18. 		function()
  19. 		{
  20. 			$("#more").toggle();
  21. 		}).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
  22. 	});
  23. </script>
  24.  
  25. </head>
  26. <body>
  27. <div>
  28. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" id="link">więcej</a></p>
  29.  
  30. <p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
  31. </div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext
castagir
17.03.2015, 19:49:48
musisz zmienic styl css #more na widoczny. Masz coś takiego

[HTML] pobierz, plaintext 
  1. <p id="more" style="display: none;">
[HTML] pobierz, plaintext

none oznacza, że jest niewidoczne, więc do póki nie zmienisz tego stylu na widoczny, nie pojawi się na stronie

dopisz cos takiego:
[HTML] pobierz, plaintext 
  1. $("#link").click(
  2. 		function()
  3. 		{
  4. $('#more').css('display', 'block');
  5. $("#more").toggle();
  6. 		}).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
  7. 	});
[HTML] pobierz, plaintext
kosmos
17.03.2015, 19:57:32
Display jest block bo z tego co się orientuję po załadowaniu musi być ten tekst niewidoczny. Dopiero po kliknięciu w link "więcej" ma się pojawić.

Zmieniłem tak i nadal nie działa:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <head>
  4. <title>Strona z newsem</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6. <!-- dodanie jQuery do dokumentu -->
  7.  
  8. <script type="text/javascript" src="jQuery.js"></script>
  9.  
  10. <!-- Nasz kod java script: -->
  11.  
  12. <script type="text/javascript">
  13.  
  14. 	$(document).ready(
  15. 	function()
  16. 	{	
  17. 		$("#link").click(
  18. 		function()
  19. 		{   
  20. 		    $('#more').css('display', 'block');
  21. 			$("#more").toggle();
  22. 		}).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
  23. 	});
  24. </script>
  25.  
  26. </head>
  27. <body>
  28. <div>
  29. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" id="link">więcej</a></p>
  30.  
  31. <p id="more" style="display: block">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext
tzm
17.03.2015, 20:05:08
http://jsfiddle.net/Lmdk6sts/
kosmos
17.03.2015, 20:11:31
Cytat(tzm @ 17.03.2015, 20:05:08 ) *
http://jsfiddle.net/Lmdk6sts/

Twój przykład działa - dziękuję, ale mógłbym Cię prosić o kilka zdań wyjaśnienia sposobu działania?
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     $('button').on('click',function(){
  3.         $('.article').toggleClass('opened');
  4.     });
  5. });
[HTML] pobierz, plaintext


rozumiem że po kliknięciu na button wywołany jest kawałek 
[HTML] pobierz, plaintext 
  1. $('.article').toggleClass('opened');
[HTML] pobierz, plaintext

z funkcją toogle która sama rozpoznaje czy element jest ukryty czy schowany tak?

Pytanie co jest nie tak z poprzednim kodem ?

trueblue
17.03.2015, 20:11:42
Dla jQuery poniżej 1.9:
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  $("#link").click(function(){
  3.   $('#more').css('display', 'block');
  4.   $("#more").toggle();
  5.  }).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
  6. });
[HTML] pobierz, plaintext


Dla jQuery powyżej 1.9
[HTML] pobierz, plaintext 
  1. $(document).ready(
  2. function () {
  3.  $("#link").click(function () {
  4.   $("#more").toggle();
  5.   if($(this).text()=='schowaj')
  6.    $(this).text('więcej');
  7.   else
  8.    $(this).text('schowaj');
  9.   });
  10.   $("#more").toggle();
  11. });
[HTML] pobierz, plaintext
tzm
17.03.2015, 20:21:37
toggleClass tylko zmienia klasę na wskazanym elemencie. to taki addClass, removeClass z flagą wbudowaną. reszta jest w cssie.
kosmos
17.03.2015, 20:24:21
No to tak:
To co napisał trueblue niestety nie działa.

a to co napisał tzm wyświetla przycisk ale kliknięcie na niego nie powoduje żadnej akcji. Kurcze .... czyżby było coś nie tak z moim serwerem lokalnym?

[HTML] pobierz, plaintext 
  1. html:
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5.     <meta http-equiv="Reply-to" content="test@gmail.pl" />
  6.     <meta name="Author" content="" />
  7.     <meta name="Description" content="Tu wpisz opis zawartości strony" />
  8.     <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  9.     <title><?php echo 'Welcome!';?></title>
  10.     <link href="<?php echo $view['assets']->getUrl('css/style4.css') ?>" rel="stylesheet" type="text/css" />
  11.  
  12.     <!-- dodanie jQuery do dokumentu -->
  13.     <script type="text/javascript" src="jQuery.js"></script>
  14.     <!-- Nasz kod java script: -->
  15.  
  16. <script type="text/javascript">
  17. $(document).ready(function(){
  18.     $('button').on('click',function(){
  19.         $('.article').toggleClass('opened');
  20.     });
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <div class="article">
  26.     <h1>Nazwa artykułu</h1>
  27.     <div class="content">
  28.         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  29.     </div>
  30.     <button>pokaż mniej/więcej</button>
  31. </div>        
  32. </body>
  33. </html>
[HTML] pobierz, plaintext


css
[HTML] pobierz, plaintext 
  1. .article .content{
  2.     display: none;
  3. }
  4. .article.opened .content{
  5.     display: block;
  6. }
[HTML] pobierz, plaintext


ale opornie mi to idzie ....
tzm
17.03.2015, 20:27:31
No to bankowo coś pochrzaniłeś w dowiązaniach, poza tym nie dałem pełnego przykładu tylko pokazałem jak chować i ukrywać.
Niech pomyślę... otwórz źródło strony i zobacz link do cssów i jquery, czy na pewno linkują w dobre miejsce, poza tym jaką masz wersję jq? stawiam na ten assets że nie działa jak powinien.
trueblue
17.03.2015, 20:29:35
W pierwszym błąd: http://jsfiddle.net/wb95aw3v/
Drugi: http://jsfiddle.net/wb95aw3v/1/
tzm
17.03.2015, 20:31:05
jakieś to brzydkie trueblue co pokazujesz, ić
kosmos
17.03.2015, 20:43:30
tzm
css jest dobrze podpięty. zmieniłem background na inny kolor i działa. jq 1.3.2


trueblue

też nie działa.

Chłopaki może mam coś nie tak z pobieraniem biblioteki?

to jest poprawny zapis?
[PHP] pobierz, plaintext 
  1.   <script type="text/javascript" src="jQuery.js"></script>
[PHP] pobierz, plaintext
tzm
17.03.2015, 20:45:40 
[HTML] pobierz, plaintext 
  1. <script src="external/jquery/jquery-2.1.3.min.js"></script>
[HTML] pobierz, plaintext


sciagnij se nowa wersje po prostu

edit: aż dziwne że gość z takim stażem na forum nie wie jak plik dołączyć biggrin.gif co Ty robiłeś tyle lat?

mówię, otwórz źródło strony i kliknij każdy link. jak 404 wywali to wiesz co jest grane, jak nie to szukamy dalej
trueblue
17.03.2015, 20:46:03
Poprawnie jeśli jQuery.js masz na tej samej ścieżce co skrypt, w którym go dołączasz.
Chrome->F12->Console.
kosmos
17.03.2015, 20:57:43
Cytat(tzm @ 17.03.2015, 20:45:40 ) *
[HTML] pobierz, plaintext 
  1. <script src="external/jquery/jquery-2.1.3.min.js"></script>
[HTML] pobierz, plaintext


sciagnij se nowa wersje po prostu

edit: aż dziwne że gość z takim stażem na forum nie wie jak plik dołączyć biggrin.gif co Ty robiłeś tyle lat?

mówię, otwórz źródło strony i kliknij każdy link. jak 404 wywali to wiesz co jest grane, jak nie to szukamy dalej



<link href="/symfony/web/css/style4.css" rel="stylesheet" type="text/css" /> działa i otwiera plik css

<script src="external/jquery/jquery-2.1.3.min.js"></script> <-- działa i otwiera plik biblioteki


Obecny kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  4.     <meta http-equiv="Reply-to" content="test@gmail.pl" />
  5.     <meta name="Author" content="" />
  6.     <meta name="Description" content="Tu wpisz opis zawartości strony" />
  7.     <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8.     <title><?php echo 'Welcome!';?></title>
  9.     <link href="<?php echo $view['assets']->getUrl('css/style4.css') ?>" rel="stylesheet" type="text/css" />
  10.  
  11.     <!-- dodanie jQuery do dokumentu -->
  12.     <script src="external/jquery/jquery-2.1.3.min.js"></script>
  13.     <!-- Nasz kod java script: -->
  14.  
  15. <script type="text/javascript">
  16. $(document).ready(function(){
  17.     $('button').on('click',function(){
  18.         $('.article').toggleClass('opened');
  19.     });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div class="article">
  25.     <h1>Nazwa artykułu</h1>
  26.     <div class="content">
  27.         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  28.     </div>
  29.     <button>pokaż mniej/więcej</button>
  30. </div>
  31. </html>
  32.  
  33. a co do stażu to na to nie patrz :) i ogólnie to dłuuuga historia ...
[HTML] pobierz, plaintext


tzm
17.03.2015, 21:15:34 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  4.     <meta http-equiv="Reply-to" content="test@gmail.pl" />
  5.     <meta name="Author" content="" />
  6.     <meta name="Description" content="Tu wpisz opis zawartości strony" />
  7.     <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8.  
  9.     <!-- dodanie jQuery do dokumentu -->
  10.     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  11.     <!-- Nasz kod java script: -->
  12.  
  13.     <script type="text/javascript">
  14.         $(document).ready(function(){
  15.             $('button').on('click',function(){
  16.                 $('.article').toggleClass('opened');
  17.             });
  18.         });
  19.     </script>
  20.     <style>
  21.         .article .content{
  22.             display: none;
  23.         }
  24.         .article.opened .content{
  25.             display: block;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div class="article">
  31.     <h1>Nazwa artykułu</h1>
  32.     <div class="content">
  33.         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  34.     </div>
  35.     <button>pokaż mniej/więcej</button>
  36. </div>
  37. </html>
[HTML] pobierz, plaintext


zobacz tak... no u mnie działa na lokalu, bez lokala...


edit: polecam w Twoim przypadku: http://www.codecademy.com/en/tracks/web
kosmos
17.03.2015, 21:25:01
Ten przykład działa.
Ok już wiem co było nie tak od samego początku. Teraz zmieniłeś odnośnik do biblioteki z
<script src="external/jquery/jquery-2.1.3.min.js"></script>
na
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Skrypt z tutoriala też już działa, a tam z kolei podawali takie źródło:
script type="text/javascript" src="jQuery.js"></script>
CSS był cały czas poprawny.

Dzięki wielkie za pomoc smile.gif
com
17.03.2015, 21:41:05
podawali bo mieli, a Ty spinasz go z symfony(jak przypuszczam) i problemem były ścieżki i jakaś archaiczna wersja JQuery smile.gif a odpowiedź druga była totalną bzdurą bo $("#more").toggle() odpowiada za naprzemienną zmianę z display none na block smile.gif
kosmos
17.03.2015, 21:43:33
Dokładnie z Symfony smile.gif
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.