ugrás a tartalomhoz

getElementById

nemalevi · 2008. Jún. 20. (P), 20.19
Sziasztok!

Remelem nem fog az elso segitokesz ember lehurrogni! A problemam megoldasa szerintem elegge egyszeru, ezert aki jaratosabb a temaban az talan konnyen valaszolni tud ra. A hangsuly most a JavaScript fuggvenyen lenne.
Van par link, amik az oldalon belul div-eket jelenitenenek meg.
Linkek:
 
	$result = mysql_query ("SELECT * FROM `kolto` ORDER BY 'position'");
	while($row = mysql_fetch_array($result)) {
	$osztaly = "menu" . $row['id'];
	  echo "<a href='$osztaly.html' class='menuLink'>" . $row["szerzo"] . "</a><br />";
	  $versek = mysql_query ("SELECT * FROM `versek` WHERE subject_id = {$row["id"]}");
	  echo "<ul class='menu' id='$osztaly'>";
	while($sor = mysql_fetch_array($versek)) {
	 $megjelen = "vers_" . $sor["id"];
	  echo "<li><a href='#' onClick='megjelenit(\"$megjelen\")'>{$sor["cim"]}</a></li><br />";
	  } 
	  echo "</ul>";
	}
Megjelenites:

$result = mysql_query ("SELECT * FROM `versek` ORDER BY `id`");
		while($row = mysql_fetch_array($result)) {
		$szamsor = "vers_" . $row['id'];
		  echo "<div id='$szamsor' style='display:none;'>";
		  echo "<center><h4 style=\"text-indent: 25px;\">{$row["cim"]}</h4></center>";
		  echo  "<h5><center>". nl2br($row["vers"]) ."</center></h5><br /><br />";
		  echo "</div>";
		}
JavaScript Fuggveny:

function megjelenit(mit) {
      document.getElementById('vers_1').style.display='none';
      document.getElementById('vers_2').style.display='none';
      document.getElementById('vers_3').style.display='none';

      document.getElementById(mit).style.display='';
    }
Tehat a lenyeg a JavaScirpt fuggvenyen lenne. Ha csak egy link van akkor a megjelenit fuggvenyben csak egy sor letezne:
document.getElementById('vers_1').style.display='none';
Ha viszont tobb link, akkor:
document.getElementById('vers_1').style.display='none';
document.getElementById('vers_2').style.display='none';
es igy tovabb.
Ezt gondolom egy for ciklussal kell megcsinalni, csak az a baj, h nem tudom kivitelezni.
‹ Program inditása webes felületről Ajaxszal betöltött form és automatikus kiegészítés ›
 ■
1

inkabb php

nemalevi · 2008. Jún. 20. (P), 20.46
Ja es persze elofordulhat h az adott id-val nem letezik tartalom. Ez mar inkabb php, de ha mer itt elkezdtem akkor itt folytatom.
Ez is ingovanyos talaj a szamomra, pedig mar elojott a problema maskor is.
Tehat az adatbazisbol lekerdezett adatokat (vers_1, vers_2, vers_4) gondolom egy tombbe kellene belerakni, csak nem tudom hogy lesz belole tomb.
A tomb elemein vegiglepkedve javascriptben pedig eloallitani a fentebb leirt sorokat.
2

jó az út

Csorba Norbert · 2008. Jún. 20. (P), 23.37
Jó úton jársz, for ciklussal kell, csakhogy már létezik is a tömb és nem kell létrehozni, a neve childNodes :)

var szulo = document.getElementById("szuloDiv");
for (var i = 0; i < szulo.childNodes.length; i++) {
   if (szulo.childNodes[i].tagName == "DIV") {
      szulo.childNodes[i].style.display='none'; 
   }
}
3

or prototype

efpe · 2008. Jún. 21. (Szo), 11.38
Jah, vagy prototype.
http://prototypejs.org/api/array/each

var children = $A($("szuloDiv").childNodes);
children.each(function(s) {
  if ($(s).tagName == 'DIV')
    $(s).hide();
});
5

vagy jquery

Csorba Norbert · 2008. Jún. 21. (Szo), 13.36
ha már az egyszerűség a cél és használunk külső js könyvtárat, akkor a jQuery is lehet egy út :)

function megjelenit(mit) {  
   $('#szuloDiv div:not(#' + mit + ')').hide(); 
}
mely a "mit" azonosítójú elem kivételével elrejti a div-eket a "szuloDiv"-en belül és ennyi...
7

Kosz Norbi es epfe a segitseget

nemalevi · 2008. Jún. 21. (Szo), 14.12
Kiprobaltam mindket verziot. Es erre jutottam:
Beletettem a megjelenit fuggvenybe az altalatok javasolt kodot a megjelenites ment is de a for cikluson meg valamit valtoztatni kene, mert az elozo divet nem tavolitja el.
Vegul arra gondoltam maradok az elso valtozatnal, csak meg ra kellene jonnom, hogy mi a hiba a for ciklusban.

function megjelenit(mit) {
var szulo = document.getElementById("<?= $megjelen; ?>");   
for (var i = 0; i < szulo.childNodes.length; i++) {   
   if (szulo.childNodes[i].tagName == "DIV") {   
      szulo.childNodes[i].style.display='none';    
   }   
} 
document.getElementById(mit).style.display='';
}
Ebben a formaban a for ciklust igazabol ki is lehet venni, mert nem csinal semmit. Gondolom ha vagnam ezeket a szulo gyermek viszonyt akkor mar meg is talaltam volna a megoldast.
4

eltérő logika

yaanno · 2008. Jún. 21. (Szo), 13.11
Bár nem vagyok nagy js guru, azt javasolnám, használj pl. CSS classneveket a tartalom elrejtésére/megjelenítésére. Egyébként a függvényed neve megjelenit - ehhez képest inkább elrejt :) De ez csak sidenote.

Úgy képzelem, hogy pl. a generált div-eket CSS-el display:none-ra állítod és létrehozol egy CSS classt, mondjuk show néven, amely beállítja az adott elemet display:block-ra.

#content div.kolto{display:none}
#content div.show{display:block}
Itt felmerül, hogy miképp is lehet a classneveket beállítani elemekre. Ehhez itt van egy példa.

Ezzel a módszerrel el tudod különíteni a különböző logikákat, és nem kell mindig módosítanod pl. a frontend részt, ha megváltoztatod a lekérdezés kimenetét. Ezzel kapcsolatban jelezném, hogy próbáld elkerülni a kimenet generálásakor a lekérdezés és a megjelenítés kódjának keverését. Ez később megtérül.

Végül, nem teljesen világos, hogy pl. azt szeretnéd-e, hogy onclickre adott tartalom megjelenése mellett a többi elem elrejtése hajtódjon-e végre?
6

Yaanno en se vagyok nagy js guru

nemalevi · 2008. Jún. 21. (Szo), 13.58
De ha jobban megnezed, esetleg kiprobalod, akkor az a fuggveny lenyege, hogy az osszes tartalmat elrejti, csak a kivalasztottat jeleniti meg. Ezert szerintem maradnek a megjelenit megnevezesnel.
Pontosabban ez lenne a lenyege, de ahogy a fentebbi valaszban leirtam most ott tartok, hogy a megjelenites sikerul a megjelenit fuggvennyel. Csak az eltuntetes nem. Van ra otleted hogy miert nem?
Szoval eddig ennyi mukodik a kodbol, ez megjeleniti azt, ami a css-ben display: none-ra van allitva.
De a Norbert altal ajanlott for for ciklus valami miatt nem mukodik.

function megjelenit(mit) {   
var szulo = document.getElementById("<?= $megjelen; ?>");       
document.getElementById(mit).style.display='';   
}
8

Takarékláng

yaanno · 2008. Jún. 21. (Szo), 18.49
Nem néztem meg Norbert kódját, de szerintem vagy indulj el abba az irányba, amit javasoltam, vagy tényleg nézz meg egy JavaScript libraryt, amint többen is említették. Én valahogy így csinálnám, bár picit fapad :)

A te megoldási irányod (a profik szerint) azért nem célravezető, mert nem takarékos - gondolj bele, ha mondjuk egy oldalon több száz költő adatát kell manipulálni. Az alább javasolt megoldás pont annyit módosít, amennyit kell, a többit a CSS-re bízza.

CSS:

div.poet-items div{display:none}
div.poet-items div.show{display:block}
JS:

			var Poet = {
				current : null,
				
				show : function(elm){
					var elem = this.get(elm);
					if (this.hasClass(elem,"show")) return;
					if (!this.current) {
						this.current = elem;
						this.addClass(this.current,"show");
					} else if (this.current != elem) {
						this.removeClass(this.current,"show");
						this.current = elem;
						this.addClass(this.current,"show");
					}
				},
				
				get : function(elm){
					return document.getElementById(elm);
				},
				
				addClass : function(elm,cls){
					elm.className += " "+cls;
				},
				
				removeClass : function(elm,cls){
					var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
					elm.className=elm.className.replace(reg,' ');
				},
				
				hasClass : function(elem,cls){
					return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
				}
			
			};
HTML:

		<div id="content">
			<div class="poet-items">
				<h3><a onclick="Poet.show('poet_1')" href="#">Költő1</a></h3>
				<div id="poet_1">Költő Leírás1</div>
				
				<h3><a onclick="Poet.show('poet_2')" href="#">Költő2</a></h3>
				<div id="poet_2">Költő Leírás2</div>
				
				<h3><a onclick="Poet.show('poet_3')" href="#">Költő3</a></h3>
				<div id="poet_3">Költő Leírás3</div>
			</div>
		</div>
9

Kosz yanno

nemalevi · 2008. Jún. 21. (Szo), 20.44
Ezt a legutobbit vegul sikerult szethamozni es belarakni php-be.