CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
56 min siden CD Burner XP (Sætte den til at optage nogle numre fra en CD - Men ikke alle ? Af Ikke-ekspert i Musik & videoafspillere
I dag 17:42 Katastrofe med Pc Af LilBe i PC
I dag 09:44 Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
I går 16:03 Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43 html <Input.. Danske bogstaver Af pjotre i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer
Læs mere »
Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter
Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret
Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge
Se alle »
Computerworld
Teaser billede
Netværkstest: Første mesh-sæt med komplette WiFi 7-features sætter nye rekorder for dækning og hastighed
Læs mere »
Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder
Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR
Nørgaard: Copilot scorer pænt højt i min kendte 3D-test (Dyrt, Dumt, Dårligt)
Se alle »
CIO
Teaser billede
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Læs mere »
En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed
AI er et falmende buzzword: Lad mig fluks dele en god og en dårlig nyhed
Region Sjælland vil skrive evighedskontrakt med Oracle-specialister: Står klar med 150 millioner kroner
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Læs mere »
Sikkerhed uden grænser: Cisco Hypershield
Cyberangreb bliver mere kostbare: Er du forberedt?
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »