Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript]jQUERY nie działa kod z tutoriala.
kosmos
post
Post #1





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
castagir
post
Post #2





Grupa: Zarejestrowani
Postów: 146
Pomógł: 3
Dołączył: 28.10.2014

Ostrzeżenie: (10%)
X----

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


Ten post edytował castagir 17.03.2015, 19:52:10
Go to the top of the page
+Quote Post
kosmos
post
Post #3





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
tzm
post
Post #4





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

http://jsfiddle.net/Lmdk6sts/
Go to the top of the page
+Quote Post
kosmos
post
Post #5





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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 ?
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
tzm
post
Post #7





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

toggleClass tylko zmienia klasę na wskazanym elemencie. to taki addClass, removeClass z flagą wbudowaną. reszta jest w cssie.
Go to the top of the page
+Quote Post
kosmos
post
Post #8





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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 ....
Go to the top of the page
+Quote Post
tzm
post
Post #9





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
trueblue
post
Post #10





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

W pierwszym błąd: http://jsfiddle.net/wb95aw3v/
Drugi: http://jsfiddle.net/wb95aw3v/1/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
tzm
post
Post #11





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

jakieś to brzydkie trueblue co pokazujesz, ić
Go to the top of the page
+Quote Post
kosmos
post
Post #12





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
tzm
post
Post #13





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X---- 

[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

Ten post edytował tzm 17.03.2015, 20:48:02
Go to the top of the page
+Quote Post
trueblue
post
Post #14





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Poprawnie jeśli jQuery.js masz na tej samej ścieżce co skrypt, w którym go dołączasz.
Chrome->F12->Console.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kosmos
post
Post #15





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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


Go to the top of the page
+Quote Post
tzm
post
Post #16





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X---- 

[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

Ten post edytował tzm 17.03.2015, 21:38:03
Go to the top of the page
+Quote Post
kosmos
post
Post #17





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował kosmos 17.03.2015, 21:34:55
Go to the top of the page
+Quote Post
com
post
Post #18





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
kosmos
post
Post #19





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----

Dokładnie z Symfony smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 06:39
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn