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
I dag 15:56 Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10 Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58 vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49 pop up black friday Af Malm i Virus
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Læs mere »
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
MDR: Transparent sikkerhed og overvågning i realtid
Styrk compliance, sikkerhed og overblik med ét hug
Se alle »

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