Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] elementTagName w wybranym Id
Volume
post
Post #1





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

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

Próbuję zrobić w js takie coś żeby po kliknięciu na dany akapit <p> podświetlał się on na żółto a tekst znajdujący się w znaczniku span zmieniał kolor np. z zielonego na czerwony - i właśnie to nie wiem jak osiągnąć w JS mając dla każdego akapitu odpowiednie id (id="showX").
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p {
  5. color: green;
  6. }
  7. </style>
  8. <script type="text/javascript">
  9. window.onload = showx; 
  10. function showx()
  11. {
  12.   var getIdAndTagName = document.getElementById('all').getElementsByTagName('p');
  13.   var getIdAndTagNameAndOne = getIdAndTagName.length+1;
  14.   for(var i=1;i<getIdAndTagNameAndOne;i++) {
  15.     document.getElementById('show'+i).onclick=function(){
  16.        for(var x=1;x<getIdAndTagNameAndOne;x++) {
  17.          document.getElementById('show'+x).style.background='none'; 
  18.        }       
  19.        this.style.background='yellow';
  20.     };
  21.   }
  22. }
  23. </script>
  24. </head>
  25.  
  26. <body>
  27.  
  28. <div id="all">
  29.   <p id="show1">asdasd <span>c</span></p>
  30.   <p id="show2">asdsad <span>c</span></p>
  31.   <p id="show3">asdsad <span>c</span></p>
  32.   <p id="show4">asdsad <span>c</span></p>
  33.   <p id="show5">asdsad <span>c</span></p>
  34. </div>
  35.  
  36. </body>
  37. </html>
[HTML] pobierz, plaintext


Ps. kod js moze być niezbyt udany ale prosze o wyrozumiałość bo rzadko coś piszę w js (jak jestem zmuszony)... ale jeśli ktoś miałby lepsze rozwiązania to proszę o rady.

Ten post edytował Volume 25.03.2010, 13:18:12
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
skowron-line
post
Post #2





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

http://v3.thewatchmakerproject.com/journal...previoussibling
A nie możesz zmienić kolor dla p (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
kipero
post
Post #3





Grupa: Zarejestrowani
Postów: 233
Pomógł: 50
Dołączył: 28.10.2006
Skąd: Radom

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

Zrób sobie dwie klasy:
[CSS] pobierz, plaintext 
  1. p.nieaktywna {
  2. background: none;
  3. }
  4. p.nieaktywna span {
  5. color: green;
  6. }
  7.  
  8. p.aktywna {
  9. background-color: yellow;
  10. }
  11. p.aktywna span {
  12. color: red;
  13. }
[CSS] pobierz, plaintext


Teraz zamiast podmieniać tło akapitu podmienisz klasę i wszystko będzie tak jak chcesz.
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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