[Rozw.] pokazywanie/ukrywanie akapitu - onclick Opcje

[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:

[HTML] pobierz, plaintext 
<script type="text/javascript">
	window.onload = Laduj;
		function Laduj() {
		var filmy = document.getElementById('filmy');
                var linki = filmy.getElementsByTagName('a');
                for (i=0; i<linki.length; i++) {
                    linki[i].onclick = PokazFilm;
                    }
		}
 
		function PokazFilm() {
                    akapit = this.getElementsByTagName('p');
                    span = this.getElementsByTagName('span');
                    var view = akapit[0].style.display;
                    if (view == "block") {akapit[0].style.display = "none"; span[0].innerHTML = "Pokaż"}
                    if (view == "none") {akapit[0].style.display = "block"; span[0].innerHTML = "Schowaj"}
		}
 
	</script>
[HTML] pobierz, plaintext 

HTML

[HTML] pobierz, plaintext 
<div id="filmy">
             <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>
 
 <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>
 
 <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>
 
        </div>
[HTML] pobierz, plaintext 

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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) , chcę też uniknąc nadawania każdemu apapitowi oddzielnego ID.

a tak to wygląda w praktyce

Ten post edytował wujek_bogdan 20.05.2009, 16:38:05

[erix]

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. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[wujek_bogdan]

script:

[HTML] pobierz, plaintext 
function PokazFilm() {
 
 
                akapit = this.nextSibling;
		alert(akapit.innerHTML);
 	}
[HTML] pobierz, plaintext 

zwraca mi alert: [undefined]


html:

[HTML] pobierz, plaintext 
<a href="#" class="none"><span>Pokaż: film 1</span></a>
     <p style="display:block" class="film">blabla</p>
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
function PokazFilm() {
		var nextS=this.nextSibling;
		while(nextS.nodeType!=1){
		nextS=nextS.nextSibling;
		}
		alert(nextS.innerHTML);
		}
[HTML] pobierz, plaintext 

Ten post edytował wujek_bogdan 20.05.2009, 16:37:31