Forum PHP.pl > [JavaScript]getElementsByClass

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]getElementsByClass

cisu

4.04.2010, 21:17:24

Mam problem z pewną funkcją, którą znalazłem w internecie. Otóż potrzebuję zrobić coś na styl: jest kilka zakładek (nie wiem ile, generowanie dynamiczne) i po kliknięciu w jedną, reszta się chowa a tylko ta jedna pokazuje (chodzi o odnośniki do tych zakładek). Poszukałem trochę i znalazłem takie cuś jak getElementsByClass. Wygląda to tak:

[JAVASCRIPT] pobierz, plaintext 
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
[JAVASCRIPT] pobierz, plaintext

Działa to mniej więcej tak (pokażę na również znalezionym przykładzie):

[JAVASCRIPT] pobierz, plaintext 
function showtab() 
{
	var tabs = getElementsByClass('test');
	for(i=0; i<tabs.length; i++)
		tabs[i].style.display = 'none';
}
[JAVASCRIPT] pobierz, plaintext

że po wywołaniu funkcji chowają się wszystkie divy i inne cuda, które mają klasę test. No właśnie to nie działa. Nie ma błędu, bo skrypt leci dalej ale coś nie jest jak powinno być. Moje pytanie właśnie tego dotyczy. Jak to naprawić? Będę wdzięczny za pomoc.

mortus

4.04.2010, 22:11:40

A dlaczego nie użyjesz gotowej funkcji getElementsByClassName? Kod który podałeś wygląda dobrze, ale nie chce mi się go testować.

AdIoS_Neo

5.04.2010, 01:01:37

Witaj, skrypt działa tak jak ma działać czyli ukrywa wszystkie elementy które mają klasę "test". Musisz wskazać mu który ma zostawić widoczny [rozwiązanie]:

[JAVASCRIPT] pobierz, plaintext 
<html>
<head>
<title>...</title>
<script type="text/javascript">
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}
 
function showtab() {
	var tabs = getElementsByClass('test');
	for(i=0; i<tabs.length; i++)
		tabs[i].style.display = 'none';
	this.style.display = "block";
}
window.onload = function(){
	var u = getElementsByClass('test');
	for(var i=0;i<u.length;i++){
		u[i].onclick = showtab;
	}
 
}
</script>
</head>
<body>
 
<div class="test">aaa1</div>
<div class="test">aaa2</div>
<div class="test">aaa3</div>
<div class="test">aaa4</div>
<div class="test">aaa5</div>
<div class="test">aaa6</div>
<a href="#" class="test">lol</a>
</body>
</html>
[JAVASCRIPT] pobierz, plaintext

Jak masz jakieś pytania co do tego to pisz.

cisu

5.04.2010, 14:37:41

dzięki za pomoc, w końcu zadziałało

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.