Avatar billede jesper-moeller Nybegynder
26. september 2006 - 01:13 Der er 11 kommentarer og
1 løsning

åben og luk med getElementById problem

jeg forsøger med dette script at åbne og lukke nogle div

function toggle_it(itemID){
    for(i = 0;i<=2;i++){
    document.getElementById("pr"+i).style.display=(i!=itemID)?'none':'block';
    document.getElementById("pr"+i).style.display=(i==itemID)?'inline':'block';
}}

men den åbner alle på en gang
og lukker ingen af dem

http://www.jart.dk/jgom/untitled2.html
Avatar billede mclemens Nybegynder
26. september 2006 - 01:27 #1
Fangede ikke helt grunden til:
document.getElementById("pr"+i).style.display=(i==itemID)?'inline':'block';
jvf. http://www.eksperten.dk/spm/734541#rid6443652 - i bunden af indlægget ...

Nu når jeg ser hvad den skal bruges til så prøv med:

function toggle_it(itemID){
    for(i = 0;i<=2;i++){
    document.getElementById("pr"+i).style.display=(i!=itemID)?'none':'block';
}}


Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function toggle_it(itemID){
    for(i = 0;i<=4;i++){
    document.getElementById("pr"+i).style.display=(i!=itemID)?'none':'block';
}}
</script>

</head><body>

<b onclick="toggle_it('0');">0</b><br>
<b onclick="toggle_it('1');">1</b><br>
<b onclick="toggle_it('2');">2</b><br>
<b onclick="toggle_it('3');">3</b><br>
<b onclick="toggle_it('4');">4</b><br>

<br><br><br>

<div id="pr0">0</div>
<div id="pr1" style="display:none;">1</div>
<div id="pr2" style="display:none;">2</div>
<div id="pr3" style="display:none;">3</div>
<div id="pr4" style="display:none;">4</div>
</body></html>
Avatar billede mclemens Nybegynder
26. september 2006 - 01:32 #2
Jeg blev lidt forvirret over den inline vs. block i slutningen
- og troede at du skitevis ville have et div element til at opføre sig som inline eller block afhængig af om det var valgt ... ( http://www.eksperten.dk/spm/734541#rid6443676 )

- Kast selv et svar og accepter, du har betalt nok point
for koden her (og så er der jo 200 point reglen pr. løsning ...
60+50+100->210 ligesom denne tråd her: http://www.eksperten.dk/spm/706630 )
Avatar billede mclemens Nybegynder
26. september 2006 - 01:35 #3
Nat, nat ;)
Avatar billede mclemens Nybegynder
26. september 2006 - 01:54 #4
Og lige det sidste script:

<script type="text/javascript">
function toggle_it(itemID){
    i=0;while(tn=document.getElementById("pr"+i)){
    tn.style.display=(i++!=itemID)?'none':'block';
}}
</script>


forklaringen:

<script type="text/javascript">
function toggle_it(itemID){
    i=0; // sætter i til 0

while(tn=document.getElementById("pr"+i)){ // så længe denne er sand kører løkken
// den vil så ikke være sand når man når til f.eks. pr9 og man kun havde op til pr8
// fordelen er så at man ikke skal definere antallet af elementer der skal gennemløbes
// den stopper af sig selv - hvis det går galt


    tn.style.display=(i++!=itemID)?'none':'block'; // afhængig af om tn element (fra while løkken) er det element man er kommet til - så vises / skjules den div ...
}}
</script>




... hvis vi skal være mere optimale kan man bruge denne her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
var prev=false;
function toggle_it(itemID){
    if(prev)document.getElementById("pr"+prev).style.display="none";
    prev=itemID;
    document.getElementById("pr"+prev).style.display="block";
}
</script>

</head><body>

<b onclick="toggle_it(0);">0</b><br>
<b onclick="toggle_it(1);">1</b><br>
<b onclick="toggle_it(2);">2</b><br>
<b onclick="toggle_it(3);">3</b><br>
<b onclick="toggle_it(4);">4</b><br>

<br><br><br>

<div id="pr0" style="display:none;">0</div>
<div id="pr1" style="display:none;">1</div>
<div id="pr2" style="display:none;">2</div>
<div id="pr3" style="display:none;">3</div>
<div id="pr4" style="display:none;">4</div>
</body></html>

... så skjuler vi bare det tidligere element istedet for at loope alle elementer igennem ... og så kunne man måske vælge at rette toggle_it(4) til:
toggle_it('chmod') eller toggle_it('binary') / andet

og så rette getElementById("pr"+prev) i funktionen til getElementById(prev)
- så får man lidt mere styr på ens id's :)

( hvis man f.eks. har chmod åben fra start af kan man så rette
var prev=false; til var prev="chmod";
(eller hvis man bruger tal var prev=0; )

- den sidste minder lidt om den sidste i dette indlæg:
http://www.eksperten.dk/spm/734541#rid6443394
Avatar billede mclemens Nybegynder
26. september 2006 - 01:54 #5
Nåh, nu må jeg hellere sove :D
Avatar billede jesper-moeller Nybegynder
26. september 2006 - 02:03 #6
Sov godt ... mens du skrev fandt jeg selv svaret

function toggle_it(prnum){
for(i = 0; i<= 2; i++)document.getElementById("pr"+i).style.display='none';
document.getElementById("pr"+prnum).style.display='block';
}

Er måske helt forker men ser ud til at virke og ligner din

åbner det valgte og lukke evnt andre åbne :-)
http://www.jart.dk/jgom/untitled2.html

så er det bare på med alle redskaberne :-)
Avatar billede mclemens Nybegynder
26. september 2006 - 08:47 #7
[ Er måske helt forker men ser ud til at virke og ligner din ]
Den er ikke forkert - den er magen til 01:27:22 :)

- Der er flere måder at løse det samme problem på og det
afhænger tit af hvad man føler er lettest for en selv ...

Husk at kaste et svar ;)
Avatar billede jesper-moeller Nybegynder
26. september 2006 - 10:56 #8
Ikke helt magen til ... men næsten :-)
Hovedsagen er det virker

Jamen hvis du ikke vil ha point, så tager jeg dem da selv.
(Skal nok finde på noget andet at bruge dem til)
Avatar billede mr_bula Nybegynder
26. september 2006 - 11:14 #9
Undskyld jeg blander mig, og endda efter at spg er blevet lukket! Men jeg tror at jeg kan bruge en del af løsningen her til mit spg: http://www.eksperten.dk/spm/734596 - Den eneste forskel er, at jeg kun skal een "toggle_it", men vil gerne have at når man klikker på eksempelvis tallet igen skal det forsvinde igen, og pr default skal den være forsvunget.

Nogen der kan/vil hjælpe med småjusteringerne?
Avatar billede jesper-moeller Nybegynder
26. september 2006 - 11:35 #10
Har ikke testet ... men noget ala
function toggle_it(prnum){
var lag= document.getElementById(prnum).style.display;
if(lag='block'{
document.getElementById(prnum).style.display='none';}
else{
document.getElementById(prnum).style.display='block';}
}
Avatar billede roenving Novice
26. september 2006 - 12:09 #11
-- og en forkortelse kunne være:

function toggle_it(prnum){
  var st = document.getElementById(prnum).style;
  st.display = st.display != 'block' ? 'block' : 'none';
}
Avatar billede mr_bula Nybegynder
26. september 2006 - 12:31 #12
hmmm kan ikke få jeres script til at virke, men har fået det til at virke med scriptet i mit spg.

Jeg vil gerne give lidt point som tak for forsøget, så smid et svar i mit spg!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester