Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Rozw.] pokazywanie/ukrywanie akapitu - onclick
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
wujek_bogdan
Mam skrypt pokazujacy/ukrywajacy dany akapitchcialem pozbyc sie javascriptowych onclick wewnatrz tagow html <a href="#" onclick="Jakasfunckja"> i wszystko wrzucic do skryptu w, wywoluje wiec fukncje przy windows.onload


java script:
  1. <script type="text/javascript">
  2. window.onload = Laduj;
  3. function Laduj() {
  4. var filmy = document.getElementById('filmy');
  5. var linki = filmy.getElementsByTagName('a');
  6. for (i=0; i<linki.length; i++) {
  7. linki[i].onclick = PokazFilm;
  8. }
  9. }
  10.  
  11. function PokazFilm() {
  12. akapit = this.getElementsByTagName('p');
  13. span = this.getElementsByTagName('span');
  14. var view = akapit[0].style.display;
  15. if (view == "block") {akapit[0].style.display = "none"; span[0].innerHTML = "Pokaż"}
  16. if (view == "none") {akapit[0].style.display = "block"; span[0].innerHTML = "Schowaj"}
  17. }
  18.  
  19. </script>


HTML
  1. <div id="filmy">
  2.  <a href="#" class="none"><span>Pokaż: film 1</span><p style="display:none" class="film">Treść akapitu</p></a><p style="padding:0;margin:0"></p>
  3.  
  4.  <a href="#" class="none"><span>Pokaż: film 2</span><p style="display:none" class="film">Treść akapitu</p></a><p style="padding:0;margin:0"></p>
  5.  
  6.  <a href="#" class="none"><span>Pokaż: film 3</span><p style="display:none" class="film">Treść akapitu</p></a><p style="padding:0;margin:0"></p>
  7.  
  8. </div>


Skrypt działa, ale akapit <p> musi znajdować się między tagami <a></a>, poniewaz w funkcji PokazFilm(), odwoluje się do niego za pomocą this.getElementsByTagName('p'); 

Chciałbym, oddzielić linki od akapitów (w chwili obecnej html wygląda tak: <a><p></p></a>, a chę żeby wyglądał tak: <a></a><p></p>). Mogę zebrać linki oraz akapity w tablie za pomocą getElementsByTagName(), i odwoływać się do nich na podstawie indeksów tablicy... ale nie wiem jak dać znać funkcji PokazFilm(), który który apakit ma zostać wyświetlony.

Powyższe rozwiązanie działa dobrze jedynie w Operze, w innych przeglądarkach gdy ostyluje linki, dziwne rzeczy zaczynają się dziać z obramowaniami, itd... i ogolnie uważam takie rozwiązanie za mało eleganckie winksmiley.jpg , chcę też uniknąc nadawania każdemu apapitowi oddzielnego ID.

a tak to wygląda w praktyce
erix
Cytat
odwoływać się do nich na podstawie indeksów tablicy... ale nie wiem jak dać znać funkcji PokazFilm(), który który apakit ma zostać wyświetlony.


Dokumentacja DOM -> nextSibling. winksmiley.jpg
wujek_bogdan
script:
  1. function PokazFilm() {
  2.  
  3.  
  4. akapit = this.nextSibling;
  5. alert(akapit.innerHTML);
  6.   }
zwraca mi alert: [undefined]


html:
  1. <a href="#" class="none"><span>Pokaż: film 1</span></a>
  2.   <p style="display:block" class="film">blabla</p>



poza tym nie wiem czy nextSibling jest tym czego szukam, poniewaz akapit owszem bedzie sie znajdowal za znacznikiem </a>, ale czy to bedzie nastepny, tego nie wiem. moze np. byc drugi w kolei. Wydaje mi sie, ze pewniejszym rozwiazaniem bedzie odwolanie sie po indeksach tablicy...tylko jak? Mimo wszystko prosze o wskazanie, co jest nie tak w powyzszym przykladzie i czemu nie dziala nextSibling.

//edit:
znalazłem rozwiązanie na jakimś forum:
  1. function PokazFilm() {
  2. var nextS=this.nextSibling;
  3. while(nextS.nodeType!=1){
  4. nextS=nextS.nextSibling;
  5. }
  6. alert(nextS.innerHTML);
  7. }
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.