Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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
 
 Start new topic
Odpowiedzi
tzm
post
Post #2





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

Posty w temacie
- kosmos   [HTML][JavaScript]jQUERY nie działa kod z tutoriala.   17.03.2015, 19:44:48
- - castagir   musisz zmienic styl css #more na widoczny. Masz co...   17.03.2015, 19:49:48
- - kosmos   Display jest block bo z tego co się orientuję po z...   17.03.2015, 19:57:32
- - tzm   http://jsfiddle.net/Lmdk6sts/   17.03.2015, 20:05:08
- - kosmos   Cytat(tzm @ 17.03.2015, 20:05:08 ) ht...   17.03.2015, 20:11:31
|- - tzm   toggleClass tylko zmienia klasę na wskazanym eleme...   17.03.2015, 20:21:37
- - trueblue   Dla jQuery poniżej 1.9: [HTML] pobierz, plaintext ...   17.03.2015, 20:11:42
- - kosmos   No to tak: To co napisał trueblue niestety nie dzi...   17.03.2015, 20:24:21
- - tzm   No to bankowo coś pochrzaniłeś w dowiązaniach, poz...   17.03.2015, 20:27:31
- - trueblue   W pierwszym błąd: http://jsfiddle.net/wb95aw3v/ Dr...   17.03.2015, 20:29:35
- - tzm   jakieś to brzydkie trueblue co pokazujesz, ić   17.03.2015, 20:31:05
- - kosmos   tzm css jest dobrze podpięty. zmieniłem background...   17.03.2015, 20:43:30
- - tzm   [HTML] pobierz, plaintext <script src="ext...   17.03.2015, 20:45:40
- - trueblue   Poprawnie jeśli jQuery.js masz na tej samej ścieżc...   17.03.2015, 20:46:03
- - kosmos   Cytat(tzm @ 17.03.2015, 20:45:40 ) [H...   17.03.2015, 20:57:43
- - tzm   [HTML] pobierz, plaintext <html><head...   17.03.2015, 21:15:34
- - kosmos   Ten przykład działa. Ok już wiem co było nie tak o...   17.03.2015, 21:25:01
- - com   podawali bo mieli, a Ty spinasz go z symfony(jak p...   17.03.2015, 21:41:05
- - kosmos   Dokładnie z Symfony   17.03.2015, 21:43:33

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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