Öppna ett stänga resten?

14 svar · 460 visningar · startad av jonne 12 okt. 2006

jonneMedlem sedan jan. 20011 154 inlägg

Frågan12 okt. 2006 21:12#1

Eftersom jag inser mina begränsningar och vet om att javascript inte är min starka sida så ska jag bespara mitt hår en massa lidande ...
Jag har följande för att kunna visa och dölja ett lager via en och samma länk.
Min fråga är nu går det att modifiera detta så att när jag klickar på en länk för att visa ett lager stänger den alla som är öppna?

function showHide(id){
		var e=getElm(id);
	
		if(e){
			if(document.layers){
				e.display=(e.display=='')?'none':'';
			} else {
				e.style.display=(e.style.display=='none'||e.style.display=='')?'block':'none';
			}
		}
	};		

	
	function getElm(s){
		switch(true){
		case typeof(document.all)=="object":
			return document.all[s];
		case typeof(document.getElementById)=="function":
			return document.getElementById(s);
		case typeof(document.layers)=="object":
			return document.layers[s];
		default:
			return 0;
		}
	};

nitro2k01Medlem sedan aug. 20039 340 inlägg

12 okt. 2006 21:15#2

Vilket format har id? Alltså finns det något mönster i vilket värde id har, typ bla1, bla2, bla3 osv?

jonneMedlem sedan jan. 20011 154 inlägg

12 okt. 2006 21:27#3

Det uppbyggt av en tidstämpel samt ett userid
Lite i stil med

<tr>	<td width="40" align="center"><a href="#" onclick="showHide('601')">09:00</a></td>
	<td><div id="601" style="display:none">div contense</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('901')">09:30</a></td>
	<td><div id="901" style="display:none">div contense</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('1201')">10:00</a></td>
	<td><div id="1201" style="display:none">div contense</div>&nbsp;</td>
</tr>

jonneMedlem sedan jan. 20011 154 inlägg

12 okt. 2006 21:31#4

Om jag gör ett tillägg föresten hjälper det? Alla div element förutom det man klickar på ska sättas till display:none. Kanske med något undantag som man kan namnge?

nitro2k01Medlem sedan aug. 20039 340 inlägg

12 okt. 2006 22:04#5

Pröva detta:

function showHide(myid){
	var es=document.getElementsByTagName("div");
	
	for (var i=0; i<es.length; i++){
		if(es[i].id == myid)
			es[i].style.display= (es[i].style.display=='none' || /^\s*$/.test(es[i].style.display))?'block':'none';
		else if(/^\d+$/.test(es[i].id))
			es[i].style.display = 'none';
	}
}

Som vanligt med min kod är den otestad, men den brukar funka. ;)
Funktionen getElm då? Jo, den kan gott ryka, om du inte använder den nån annanstans.

jonneMedlem sedan jan. 20011 154 inlägg

13 okt. 2006 06:08#6

Well det där funkade men ändå inte :) Döljer och släcker på samma länk fortfarande som innan men döljer inte dem som redan är öppnade

Peter SMedlem sedan dec. 20025 483 inlägg

13 okt. 2006 10:51#7

Nitros förslag bör fungera. Testa följande och verifiera att alla div.id är numeriska

<tr>	<td width="40" align="center"><a href="#" onclick="showHide('601')">09:00</a></td>
	<td><div id="601" style="display:none">div contense 09:00</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('901')">09:30</a></td>
	<td><div id="901" style="display:none">div contense 09:30</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('1201')">10:00</a></td>
	<td><div id="1201" style="display:none">div contense 10:00</div>&nbsp;</td>
</tr>

<script>
function showHide(myid){
	var es=document.getElementsByTagName("div");
	
	for (var i=0; i<es.length; i++){
		if(es[i].id == myid)
			es[i].style.display= (es[i].style.display=='none' || /^\s*$/.test(es[i].style.display))?'block':'none';
		else if(/^\d+$/.test(es[i].id))
			es[i].style.display = 'none';
	}
}
</script>

jonneMedlem sedan jan. 20011 154 inlägg

13 okt. 2006 11:12#8

Aha numeriska. Där hade vi det! :) Tackar så mycke!

Peter SMedlem sedan dec. 20025 483 inlägg

13 okt. 2006 11:16#9

Visserligen får inte id-attribut börja med en siffra, så vill du kunna validera dokumentet får ett annat format hittas på. Så länge formatet följer ett logiskt mönster är ovanstående skript lätt att skriva om för att hantera det. :)

jonneMedlem sedan jan. 20011 154 inlägg

13 okt. 2006 13:24#10

Du vet vad nästa fråga blir när du säger sådär va? :e Om jag vill ha till ett litet prefix exv 'ref' ?

Peter SMedlem sedan dec. 20025 483 inlägg

13 okt. 2006 13:29#11

Då

function showHide(myid){
	var es=document.getElementsByTagName("div");
	
	for (var i=0; i<es.length; i++){
		if(es[i].id == myid)
			es[i].style.display= (es[i].style.display=='none' || /^\s*$/.test(es[i].style.display))?'block':'none';
		else if(/^[red][B]ref[/B][/red]\d+$/.test(es[i].id))
			es[i].style.display = 'none';
	}
}

jonneMedlem sedan jan. 20011 154 inlägg

13 okt. 2006 13:57#12

Nja. Verkade inte vilja spela boll.
Testade att lägga till det i raden innan också men gick inte mycke bättre

es[i].style.display= (es[i].style.display=='none' || /^ref\s*$/.test(es[i].style.display))?'block':'none';

Peter SMedlem sedan dec. 20025 483 inlägg

13 okt. 2006 14:00#13

Har du ändrat alla div.id och funktionsanrop?

<tr>	<td width="40" align="center"><a href="#" onclick="showHide('ref601')">09:00</a></td>
	<td><div id="ref601" style="display:none">div contense 09:00</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('ref901')">09:30</a></td>
	<td><div id="ref901" style="display:none">div contense 09:30</div>&nbsp;</td>
</tr>
<tr>	<td width="40" align="center"><a href="#" onclick="showHide('ref1201')">10:00</a></td>
	<td><div id="ref1201" style="display:none">div contense 10:00</div>&nbsp;</td>
</tr>

<script>
function showHide(myid){
	var es=document.getElementsByTagName("div");
	
	for (var i=0; i<es.length; i++){
		if(es[i].id == myid)
			es[i].style.display= (es[i].style.display=='none' || /^\s*$/.test(es[i].style.display))?'block':'none';
		else if(/^ref\d+$/.test(es[i].id))
			es[i].style.display = 'none';
	}
}
</script>

jonneMedlem sedan jan. 20011 154 inlägg

13 okt. 2006 14:11#14

Ah men puckojonne! Jag ändrade funktionsanropen men inte id:na på divarna! Tur du har tålamod :e
Tusen tack för hjälpen!

Peter SMedlem sedan dec. 20025 483 inlägg

13 okt. 2006 14:13#15

(y)