WN - Javascriptproblem; getElementById

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Javascriptproblem; getElementById (https://www.wn.se/forum/showthread.php?t=23337)

Tja

Sitter och grejjer med javascript och har stött på ett simpelt problem som jag inte lyckas komma runt.

Såhär ser koden ut:

Kod:

<script>

function visa(var1, var2, var3, var4) {

document.getElementById(var1).style.display='block';

document.getElementById(var2).style.display='none';

document.getElementById(var3).style.display='none';

document.getElementById(var4).style.display='none';

}

</script>

<body>

 <a href="#" onClick="visa('nr1', 'nr2', 'nr3', 'nr4');"> #1 </A>

<div id=nr1>Text...</div>

<div id=nr2>Text...</div>

<div id=nr3>Text...</div>

<div id=nr4>Text...</div>

Detta script har jag i en meny, men blir förbaskat bökigt när man börjar komma upp i 10 alternativ. Jag vill istället göra så att jag endast laddar in den jag vill visa, och de andra döljs automatiskt. Borde ju funka med nått i stil med

Kod:

document.getElementById('nr1').style.display='none';

document.getElementById('nr2').style.display='none';

document.getElementById('nr3').style.display='none';

document.getElementById('nr4').style.display='none';



document.getElementById(var1).style.display='block';

Får det dock inte att fungera:/ känns som att man måste definiera variablerna först, men är för dålig på javascript för att lista ut hur :(

Tacksam för hjälp!

med jquery kan detta fixas snabbt och lätt.

$(".hiddendiv").hide(); // för att gömma alla med klassen "hiddendiv"
$("div2').show(); // för att visa just div2

<div id="div1" class="hiddendiv">Text 1...</div>
<div id="div2" class="hiddendiv">Text 2...</div>
<div id="div3" class="hiddendiv">Text 3...</div>
<div id="div4" class="hiddendiv">Text 4...</div>
<div id="div5" class="hiddendiv">Text 5...</div>

kolla på jQuerys hemsida för dokumentation.

edit:
för att göra exemplet lite mer levande:
<script type="text/javascript">
$(function() {
$(".hiddendiv").hide(); // för att gömma alla med klassen "hiddendiv"

$("h3").click(function(){
$(".hiddendiv").hide();
$(this).next().show();
});
});
</script>

<h3 id="hdiv1">Div 1</h3>
<div id="div1" class="hiddendiv">Text 1...</div>

<h3 id="hdiv2">Div 2</h3>
<div id="div2" class="hiddendiv">Text 2...</div>

<h3 id="hdiv3">Div 3</h3>
<div id="div3" class="hiddendiv">Text 3...</div>

<h3 id="hdiv4">Div 4</h3>
<div id="div4" class="hiddendiv">Text 4...</div>

<h3 id="hdiv5">Div 5</h3>
<div id="div5" class="hiddendiv">Text 5...</div>

Tack så mycket! Ska bli kul att använda jquery :P

Citat:

There's no eeeend to the possibilities....

;)

Ingen som hört talas om DOM?? Att tynga ner sidan med så mycket repetitiv kod och dessutom med så många class:er och id:ar är ju egentligen inte alls nödvändigt…

Kod:

<div id="hiddendivs">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

med

Kod:

document.getElementById('hiddendivs').childNodes[];

och iterera igenom istället för att köra getElementById();

Det finns ju massa bra funktioner för att få tag på vad man behöver i dokumentstrukturen, get ElementByNames(), .firstChild, .lastChild, .nextSibling, .parentNode osv. Man kan navigera runt i dokumentstrukturen hur fint som helst utan att sätta id på allting!

Glöm inte: ditt html-dokument är ett objekt, inte en hög taggar!

Edit: Detta gäller förstås lika mycket för css

Kod:

div#hiddendivs>div {display: none}

Citat:

Originally posted by martine@Sep 4 2007, 13:05
Ingen som hört talas om DOM?? Att tynga ner sidan med så mycket repetitiv kod och dessutom med så många class:er och id:ar är ju egentligen inte alls nödvändigt…

Kod:

<div id="hiddendivs"> <div>1</div> <div>2</div> <div>3</div> </div>

med

Kod:

document.getElementById('hiddendivs').childNodes[];

och iterera igenom istället för att köra getElementById();

Det finns ju massa bra funktioner för att få tag på vad man behöver i dokumentstrukturen, get ElementByNames(), .firstChild, .lastChild, .nextSibling, .parentNode osv. Man kan navigera runt i dokumentstrukturen hur fint som helst utan att sätta id på allting!

Glöm inte: ditt html-dokument är ett objekt, inte en hög taggar!

Edit: Detta gäller förstås lika mycket för css

Kod:

div#hiddendivs>div {display: none}

Kom ihåg att

Kod:

document.getElementById('hiddendivs').childNodes[];

även returnerar "white-space"-nodes...
Alltså, när du loopar igenom dom så kontrollera att

Kod:

element.nodeType==1

(eller Node.ELEMENT_NODE, fast jag har för mig att det inte fungerar i IE).
Annars får du krasch.

Det räcker ju med använda språket... Om man gör väldigt få, små, grejer med javascript så behöver man knappast använda saker som jquery edy. (JQuery är bra i många fall) Dessutom bör man returnera false i nedanstående fall för att inte historyn i webbläsaren ska lägga onödiga grejer.

Kod:

<script>

function visa(list) {

 for (i in list) {

  document.getElementById(list[i]).style.display='block';

 }

 return false;

}

</script>



<body>

<a href="#" onClick="return visa(Array('nr1', 'nr2', 'nr3', 'nr4'));"> #1 </A>

<div style="display:none;" id=nr1>Text...</div>

<div style="display:none;" id=nr2>Text...</div>

<div style="display:none;" id=nr3>Text...</div>

<div style="display:none;" id=nr4>Text...</div>