Avatar billede -ace Nybegynder
21. juni 2006 - 13:28 Der er 24 kommentarer og
1 løsning

Vis/skjul mange <DIV>'s

Hejsa,

Sidder og roder med noget Javascript - tror nok det er det jeg skal bruge.
Jeg har en masse linier tekst, der kommer hele tiden flere.
Der findes 6 slags liner. Kunne godt tænke mig, at ved at tjekke eller untjekke nogle checkboxe skal den skjule alle de slags tekser, der høre til den boks.

Håber i forstår, prøver lige med et eksempel:

1: <div id="1">12345</div>
2: <div id="1">12345</div>
3: <div id="3">12345</div>
4: <div id="1">12345</div>
5: <div id="2">12345</div>
6: <div id="1">12345</div>
7: <div id="1">12345</div>
8: <div id="1">12345</div>
9: <div id="6">12345</div>
10: <div id="1">12345</div>
11: <div id="4">12345</div>
12: <div id="1">12345</div>

Lad os sige det ser sådan ud. Så ved at sætte et hak i checkboxen der representere id 4, så skal den vise ALLE de div's med id 4, og når man fjerne hakket den skal skjule dem igen.

Valgte id og div var bare ekspempel, men så i kunne prøve at forstå det.

Har leget med en masse, men kan kun få den til at skjule og vise første forkomst af hvert div..

Håber i kan hjælpe, og hvis i er i tvivl - ved godt jeg beskrev det dårligt i starten - så spørg endeligt :)
Avatar billede madeindk Nybegynder
21. juni 2006 - 13:38 #1
Du kan evt. prøve med dette script - det spiller bare og det er nemt at forstå. Men tror desværre kun der er en div der kan hedde fx. 4 - så ved ikke helt om du kan bruge det, men ellers er det jo bare at gøre som jeg har skrevet i eksempel 2 - det havde jeg nok valgt at gøre

<script type="text/javascript">

      function view( targetId ){
        if (document.getElementById){
                target = document.getElementById( targetId );
                  if (target.style.display == "none"){
                      target.style.display = "";
                  } else {
                      target.style.display = "none";
                  }
            }
            }    
           
      function hide( targetId ){
          if (document.getElementById){
                target = document.getElementById( targetId );
                  if (target.style.display == ""){
                      target.style.display = "none";
                  } else {
                      target.style.display = "none";
                  }
            }
            }

</script>

Eksempel 1:

<input type="checkbox" onclick="view('4');"><br><br>

<div id="4" style="display:none;">12345</div>

Eksempel 2:

<input type="checkbox" onclick="view('table');"><br><br>

<table id="table" style="display:none;">

<div>1</div>

<div>2</div>

<div>3</div>

</table>
Avatar billede -ace Nybegynder
21. juni 2006 - 13:39 #2
Kan man bruge wildcards i Javascript?
Så hvis jeg kalder de forskellige <DIV>'s for foo og test f.eks, så kalder jeg alle test div for test1 test2 test3 og så kan den lave hide/show på test* og foo* ?


Er det en måde at løse det på ?
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:39 #3
Eller måske:


<!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 showhide(tn){
  tne=document.getElementsByTagName("div");
  for(i=0;i<tne.length;i++)if(tne[i].className==tn.name)tne[i].style.display=(tn.checked)?"none":"block";
}
</script>

</head><body>

1: <input type="checkbox" name="d1" onclick="showhide(this);"><br>
2: <input type="checkbox" name="d2" onclick="showhide(this);"><br>
3: <input type="checkbox" name="d3" onclick="showhide(this);"><br>
4: <input type="checkbox" name="d4" onclick="showhide(this);"><br>
5: <input type="checkbox" name="d5" onclick="showhide(this);"><br>
6: <input type="checkbox" name="d6" onclick="showhide(this);"><br><br>

1: <div class="d1">12345</div><br>
2: <div class="d1">12345</div><br>
3: <div class="d3">12345</div><br>
4: <div class="d1">12345</div><br>
5: <div class="d2">12345</div><br>
6: <div class="d1">12345</div><br>
7: <div class="d1">12345</div><br>
8: <div class="d1">12345</div><br>
9: <div class="d6">12345</div><br>
10: <div class="d1">12345</div><br>
11: <div class="d4">12345</div><br>
12: <div class="d1">12345</div><br>

</body></html>
Avatar billede madeindk Nybegynder
21. juni 2006 - 13:41 #4
Er ikke så skarp i JavaScript - havde bare lige denne her liggende. Men du kan jo sagtens skrive i din checkbox fx.:

<input type="checkbox" onclick="view('table'); view('table2'); view('table3;);">

Altså så den bruger den samme funktion flere gange :-)
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:41 #5
[ Valgte id og div var bare ekspempel, men så i kunne prøve at forstå det. ]
- Ikke helt heldigt eksempel da id ikke må starte med tal og der ikke må være flere elementer på samme side med samme id... Validering på className er bedre...
Avatar billede -ace Nybegynder
21. juni 2006 - 13:41 #6
Tak for svaret, tror bare ikke du har forstået det rigtigt :)

Jeg har en masse linier med samme div, som jeg gerne ville ha vist eller skjult på samme tid, alle linierne med samme div. Og jeg har 6 forskellige typer div, og hver af dem har utrolig mange linier der skal vises eller skjules, på samme tid.

Håber det er til at forstå hehe :)
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:42 #7
-ace, Check min...
Avatar billede madeindk Nybegynder
21. juni 2006 - 13:43 #8
Hmm ok - så blir jeg nok nød til at hoppe fra her - så har jeg ikke nogen løsning og har vidst misforstået spørgsmålet godt og grundigt.
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:47 #9
Lidt bedre da den giver mulighed for flere class
defineringer hvis man nu har behovet for det...


<!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 showhide(tn){
  tne=document.getElementsByTagName("div");
  for(i=0;i<tne.length;i++)if(tne[i].className.indexOf(tn.name)!=-1)tne[i].style.display=(tn.checked)?"none":"block";
}
</script>

</head><body>

1: <input type="checkbox" name="showhide1" onclick="showhide(this);"><br>
2: <input type="checkbox" name="showhide2" onclick="showhide(this);"><br>
3: <input type="checkbox" name="showhide3" onclick="showhide(this);"><br>
4: <input type="checkbox" name="showhide4" onclick="showhide(this);"><br>
5: <input type="checkbox" name="showhide5" onclick="showhide(this);"><br>
6: <input type="checkbox" name="showhide6" onclick="showhide(this);"><br><br>

1: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
2: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
3: <div class="haretandetclassnameogsaa showhide3">12345</div><br>
4: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
5: <div class="haretandetclassnameogsaa showhide2">12345</div><br>
6: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
7: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
8: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
9: <div class="haretandetclassnameogsaa showhide6">12345</div><br>
10: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
11: <div class="haretandetclassnameogsaa showhide4">12345</div><br>
12: <div class="haretandetclassnameogsaa showhide1">12345</div><br>

</body></html>
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:48 #10
tne[i].style.display=(tn.checked)?"none":"block";
Skal rettes til
tne[i].style.display=(tn.checked)?"block":"none";
Hvis den skulle vise ved afkrydsning istedet for at skjule...
Avatar billede -ace Nybegynder
21. juni 2006 - 13:49 #11
mclemens: Du er genial, det virker jo bare :)!
Har godt nok ikke prøvet den anden endnu, men det vil jeg straks gøre!

Et ekstra spørgsmål:
Kan man definere hvilke der skal være vist og skjult til at starte med?
Så de checkboxe der ikke er hak i ikke bliver vist som standard, men først når hakket kommer i?
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:50 #12
^ - Jamen så ser jeg lige om jeg når den type istedet...
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:56 #13
<!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">

window.onload=function(){
for(r=1;r<7;r++){showhide("showhide"+r,false);}
}

function showhide(tn,typ){alert(1);
  tne=document.getElementsByTagName("div");
 

for(i=0;i<tne.length;i++)if(tne[i].className.indexOf(tn)!=-1)tne[i].style.display=(typ)?"

block":"none";
}
</script>

</head><body>

1: <input type="checkbox" name="showhide1"

onclick="showhide(this.name,this.checked);"><br>
2: <input type="checkbox" name="showhide2"

onclick="showhide(this.name,this.checked);"><br>
3: <input type="checkbox" name="showhide3"

onclick="showhide(this.name,this.checked);"><br>
4: <input type="checkbox" name="showhide4"

onclick="showhide(this.name,this.checked);"><br>
5: <input type="checkbox" name="showhide5"

onclick="showhide(this.name,this.checked);"><br>
6: <input type="checkbox" name="showhide6"

onclick="showhide(this.name,this.checked);"><br><br>

1: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
2: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
3: <div class="haretandetclassnameogsaa showhide3">12345</div><br>
4: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
5: <div class="haretandetclassnameogsaa showhide2">12345</div><br>
6: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
7: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
8: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
9: <div class="haretandetclassnameogsaa showhide6">12345</div><br>
10: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
11: <div class="haretandetclassnameogsaa showhide4">12345</div><br>
12: <div class="haretandetclassnameogsaa showhide1">12345</div><br>

</body></html>
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:56 #14
ombrudt :/

<!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">

window.onload=function(){
for(r=1;r<7;r++){showhide("showhide"+r,false);}
}

function showhide(tn,typ){alert(1);
  tne=document.getElementsByTagName("div");
  for(i=0;i<tne.length;i++)if(tne[i].className.indexOf(tn)!=-1)tne[i].style.display=(typ)?"block":"none";
}
</script>

</head><body>

1: <input type="checkbox" name="showhide1" onclick="showhide(this.name,this.checked);"><br>
2: <input type="checkbox" name="showhide2" onclick="showhide(this.name,this.checked);"><br>
3: <input type="checkbox" name="showhide3" onclick="showhide(this.name,this.checked);"><br>
4: <input type="checkbox" name="showhide4" onclick="showhide(this.name,this.checked);"><br>
5: <input type="checkbox" name="showhide5" onclick="showhide(this.name,this.checked);"><br>
6: <input type="checkbox" name="showhide6" onclick="showhide(this.name,this.checked);"><br><br>

1: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
2: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
3: <div class="haretandetclassnameogsaa showhide3">12345</div><br>
4: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
5: <div class="haretandetclassnameogsaa showhide2">12345</div><br>
6: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
7: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
8: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
9: <div class="haretandetclassnameogsaa showhide6">12345</div><br>
10: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
11: <div class="haretandetclassnameogsaa showhide4">12345</div><br>
12: <div class="haretandetclassnameogsaa showhide1">12345</div><br>

</body></html>
Avatar billede mclemens Nybegynder
21. juni 2006 - 13:58 #15
window.onload=function(){
for(r=1;r<7;r++){showhide("showhide"+r,false);}
}

^ Denne løber alle 6 div typerne igennem ved
load af siden og skjuler dem alle med det nye script...
- de kan selvfølgelig også kaldes enkeltvis:
window.onload=function(){
showhide("showhide1",false);
showhide("showhide2",false);
showhide("showhide3",false);
showhide("showhide4",false);
showhide("showhide5",false);
showhide("showhide6",false);}
}
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:01 #16
Kan også lide validere på checkbox'ene istedet...
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:01 #17
lide -> lige
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:03 #18
hov, der var også en alert(1); i den anden der skulle slettes
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:05 #19
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">

window.onload=function(){
for(r=1;r<7;r++){showhide("showhide"+r,document.getElementById("showhide"+r).checked);}
}

function showhide(tn,typ){
  tne=document.getElementsByTagName("div");
  for(i=0;i<tne.length;i++)if(tne[i].className.indexOf(tn)!=-1)tne[i].style.display=(typ)?"block":"none";
}
</script>

</head><body>

1: <input type="checkbox" id="showhide1" checked="checked" onclick="showhide(this.id,this.checked);"><br>
2: <input type="checkbox" id="showhide2" onclick="showhide(this.id,this.checked);"><br>
3: <input type="checkbox" id="showhide3" onclick="showhide(this.id,this.checked);"><br>
4: <input type="checkbox" id="showhide4" onclick="showhide(this.id,this.checked);"><br>
5: <input type="checkbox" id="showhide5" onclick="showhide(this.id,this.checked);"><br>
6: <input type="checkbox" id="showhide6" onclick="showhide(this.id,this.checked);"><br><br>

1: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
2: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
3: <div class="haretandetclassnameogsaa showhide3">12345</div><br>
4: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
5: <div class="haretandetclassnameogsaa showhide2">12345</div><br>
6: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
7: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
8: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
9: <div class="haretandetclassnameogsaa showhide6">12345</div><br>
10: <div class="haretandetclassnameogsaa showhide1">12345</div><br>
11: <div class="haretandetclassnameogsaa showhide4">12345</div><br>
12: <div class="haretandetclassnameogsaa showhide1">12345</div><br>

</body></html>
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:08 #20
Kaster lige et svar - et først på
nettet igen om et par timer...
Avatar billede -ace Nybegynder
21. juni 2006 - 14:08 #21
Hej igen..
Det virker perfekt, pånær den der bestemmer om div'sne er vist eller skjult som standard..

Det skal kunne vælges manuelt på de forskeligge divs, da det er forskelligt hvad der skal skjules :)

MANGE tak for hjælpen
Avatar billede -ace Nybegynder
21. juni 2006 - 14:09 #22
En anden ting, hvis nu jeg omdøber de forskellige classes til foo og test f.eks. så virker det ikke ordenligt ?
Avatar billede mclemens Nybegynder
21. juni 2006 - 14:22 #23
window.onload=function(){
for(r=1;r<7;r++){showhide("showhide"+r,document.getElementById("showhide"+r).checked);}
}
^ - du skal bare rette showhide i denne også...
- > samt id defineringerne på checkbox'ene:
1: <input type="checkbox" id="showhide1" checked="checked" onclick="showhide(this.id,this.checked);"><br>
2: <input type="checkbox" id="showhide2" onclick="showhide(this.id,this.checked);"><br>

- Bemærk dette er fra ovenstående eksempel den øverste er checked fra starten af så med ovenstående script vil det kun være div's med det id der er synlig - hvis det skal virke modsat skal:
tne[i].style.display=(typ)?"block":"none";
rettes til:
tne[i].style.display=(typ)?"none":"block";


... hvis nu du ikke vil have forskellige class navne på div'erne og ikke med samme class og fortløbende nummere så kan du lave opkaldet til visning/skjulning via:

window.onload=function(){
showhide("idpaacheckboxen",document.getElementById("idpaacehckboxen").checked);
showhide("andetidpaacheckboxen",document.getElementById("andetidpaacehckboxen").checked);
showhide("idpaacheckboxen3",document.getElementById("idpaacehckboxen3").checked);
}

- Dog vil samme class angivelse med øgelse i nr nok være
bedst ... kigger på det iaften hvis jeg misforstod det :o)
[ Det skal kunne vælges manuelt på de forskeligge divs, da det er forskelligt hvad der skal skjules :) ]
- Ikke helt sikker på at jeg forstod den... da den sidste validerer på om checkbox'ene er afkrydset...
Avatar billede -ace Nybegynder
21. juni 2006 - 14:49 #24
Sådan, ændrede mine div navne så det passede til det du har lavet, og så spillede det bare!

Dog ikke så godt i firefox, da den ikke skjuler alt det som standard :)
Avatar billede mclemens Nybegynder
21. juni 2006 - 17:13 #25
Den sidste jeg kom med skjuler umiddelbart alle felterne hos mig såfremt jeg fjerner den checked fra den ene checkbox ... ellers hvis jeg sætter nogle af dem til checked bliver de ikke skjult fra starten af ... har du et kodeeksempel så kigger jeg på det...

- Og tak for point :o)
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