v5.dk logo
Kom ind og besøg vores Discord Chat-community
Bliv medlem her eller læs mere om Discord her
Kærlighed kan godt købes for penge
- vi elsker nemlig vores kunder :-)

Mere info Køb nu

Premium på v5.dk
v5.dk logo  v5.dk e-learning
Log på med Facebook
  • Log ind på v5.dk
  • Opret bruger
  • Log ind
  • v5.dk Premium
  • v5.dk Premium
  • Hvad siger vores kunder?
  • E-læring for begyndere
  • icon for WordPress 4 e-learning WordPress 4
  • icon for Office 365 e-learning Office 365
  • icon for Microsoft Word e-learning Microsoft Word
  • Bloggen for alle
  • E-læring for nørder
  • icon for PHP-programmering e-learning PHP-programmering
  • icon for iOS Programmering e-learning iOS Programmering
  • icon for Linux Server e-learning Linux Server
  • Bloggen for nørder
  • Arkiverede videoer
  • Fællesskab
  • Forum
  • Idéer og ønsker
  • Markedspladsen
  • v5.dk Premium
  • Gratis webhotel
  • Cloud-servere
  • Om v5.dk
  • Søg på v5.dk
  • Om v5.dk ApS
    • Om virksomheden
    • RSS-feeds og tjenester
    • Driftsmeddelelser
    • Presse-kit
    • Ledige jobs
    • Social Netværk
      • Facebook
      • Twitter
      • Instagram
    • Alt det andet
      • Forretningsbetingelser
      • Ophavsret og Copyright
  • Kontakt kundeservice
  • FAQ og Hjælp
    • Premium og abb.
    • Videoer og Afspiller
    • Forum og Points
    • Cloud-servers
  • Partner/Virksomhed
  • Partner-kanal
v5.dk logo mobile
  • Menu
  • Opret bruger

Hvorfor virker denne if sætning ikke i Javascript?

  • v5.dk
  • Forum
  • PHP-programmering
  • Hvorfor virker denne if sætning ikke i Javascript?
  • Sidevisninger: 3218 har set dette indlæg
Besvar #0Spørgsmål oprettet af @rasmusmax-petersen | 145 points
5 points ude 5 indlæg 6 år siden Spørgsmål besvaret
avatar
 

Halløj...

Jeg sparer lidt på pointene, da jeg kan mærke jeg får god brug for at stille spørgsmål herinde, og der er sikkert også et simpelt svar - jeg håber det er ok.

I videoen: "Brug Javascript/jQuery til at lave en "Opret Bruger"-formular med lækker slide-effekt", laver vi en funktion: "toggleLogin(), der skal udføre vores slide-effekt på vores <div>

I videoen foreslås det, at man opretter to funktioner, for at kunne slide tilbage til udgangspunktet, hvor funktion nummer 2 faktisk er magen til den første, med undtagelse af omvendt rikkefølge på slide()-kaldene.

Som den flittige studerende (hehe) jeg er, bed jeg mærke i "DRY"-konceptet der blev nævnt i en tidligere video, og det er jo lidt det vi gør her - altså gentager (næsten) samme kode flere gange...

Derfor tænkte jeg, at det måtte kunne lade sig gøre at nøjes med én funktion, toggleLogin, og så igennem den håndtere hvad der skal ske, når den køres.

Mit forsøg var derfor: 

function toggleLogin() {
        if ($("userCreatePanel").is('visible') === false) {
          $("#userLoginPanel").slideUp();
          $("#userCreatePanel").slideDown();
        } else {
          $("#userCreatePanel").slideUp();
          $("#userLoginPanel").slideDown();
        }
      }

Det virker bare ikke....

Første del virker sådan set fint nok, men når jeg efterfølgende trykker på min "Allerede medlem - log ind" knap, der også kalder toggleLogin(), så sker der ingenting.

Min teori er, at "visible" variablen ikke opdaterer i browseren, selvom den skjulte <div> er blevet synlig efter første kald af toggleLogin(), men kan det passe - og er der eventuelt et workaround?

avatar
 
Besvar#1 @rasmusmax-petersen kommenterede for 6 år siden

Hmm... Jeg fandt en løsning, der også var lidt pænere:

function toggleLogin() {
        if ($("#userCreatePanel").is(':hidden')) {
          $("#userLoginPanel").slideUp();
          $("#userCreatePanel").slideDown();
        } else {
          $("#userCreatePanel").slideUp();
          $("#userLoginPanel").slideDown();
        }
      }

Jeg er dog stadig ikke rigtig klar over, hvorfor min første kode ikke virkede, så der er fortsat 5 point til den der kan forklare det :-)

Dette svar er accepteret af OP og tildelt 5 points
avatar
 
Besvar#2 @dhh Admin svarede for 6 år siden

Hej rasmusmax-petersen @rasmusmax-petersen 

Dejligt at høre at du holder ved og prøver ting selv også, for der lære man især en del. Jeg har taget friheden at lave et lille eksempel ud fra din kode af på JSFiddle. (Der kan man køre jQuery kode.) Eksemplet kan findes her: https://jsfiddle.net/dhhdev/deybcryz/ (Mange veje føre til Rom )

Men nu til dit spørgsmål. Visible vs. Hidden. Der er en betydelig forskel på de to:

hide/show: Sætter display: none; i browseren, så det vil sige, så vidt browseren ved, så er det helt væk.

visible: Lidt det samme som hide, (hidden) - men dog med den forskel at det bare vil gøre det "transparent" i browseren. Det eksistere stadigvæk i DOM (Document Object Model) og bruger resourcer/plads i baggrunden.

Vi går ikke meget ind i det i videoen du henvisser til, siden at den serie er om PHP. Så derfor springer vi lidt "let og elefant" over jQuery og design delen. Jeg håber på at det gav dig lidt ekstra information.

P.S: I vores arkiv kan du finde lidt uddateret materiale omrkring jQuery specifikt, du finder vores gamle arkiv lige her: https://v5.dk/arkivet/

Redigeret af dhh @dhh  d. 22.10.2016 kl. 23:02

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#3 @rasmusmax-petersen kommenterede for 6 år siden

 #2  Men eftersom min kode i #1 virker, så må slideUp() sætte display: none, når objektet er væk, og display: visible når objektet er der - korrekt?

Ligeledes troede jeg at visible: true og visible: false blev flagget, når et objekt ikke fylder nogle pixels på en skærm - det er hvad jeg synes jeg kunne læse mig frem til på Stackoverflow.

Derfor forstår jeg ikke hvad det er der går galt i min første kode, da jeg jo spørger på om visible = false (og det virker), men else delen virker bare ikke.


JSFiddle virker som et rigtigt smart værktøj - den har jeg bookmarked :-)

avatar
 
Besvar#4 @dhh Admin kommenterede for 6 år siden

 #3  Jeg undskylder lige hurtigt for at springe noget vigtigt over.
slideUp/slideDown sætter display; og sætter den derefter tilbage til standarden for det "objekt" du benytter. (DIV i dit tilfælde.)

visible er noget anderledes, det sætter opacity/transparent til 0 og derefter til 100% igen. Med andre ord, det er ikke væk, bare transparent og derfor fejler din kode. (For det eksistere, og er hvad din kode faktisk tjekker. Ikke om det er synligt eller ej for os mennesker.)

Jeg er helt enig at "wording/ordlyden" kunne være meget bedre i jQuery, men det sådan de har valgt at gøre det.

Redigeret af dhh @dhh  d. 22.10.2016 kl. 20:00

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#5 @dhh Admin kommenterede for 6 år siden

Jeg havde forresten glemt at opdatere min kode på JSFiddle, så her har du den endelige version af min test kode. Som virker helt som det skal: https://jsfiddle.net/dhhdev/deybcryz/ 

Redigeret af dhh @dhh  d. 22.10.2016 kl. 23:01

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

Spørgsmålet er besvaret, men du er altid mere end velkommen til at skrive en kommentar!
avatar
 

Du er ikke logget ind

Du skal være logget ind på v5.dk før du kan benytte vores forum. Det er ganske gratis at oprette en bruger.

Opret en ny gratis bruger Log ind

Følger med i denne tråd

rasmusmax-petersen

Forum kategorier

  • Generelt
  • Guides & Howto84
  • Offtopic / Andet158
  • Microsoft Office
  • Microsoft Word11
  • Microsoft Excel4
  • Microsoft PowerPoint0
  • Web og hjemmesider
  • Wordpress17
  • Operativsystemer
  • Apple Mac OS X14
  • Apple iOS28
  • Microsoft Windows4
  • Linux16
  • Teknologier
  • Netværk og WiFi3
  • Internet-tjenester9
  • Programmering
  • PHP-programmering124
  • iPhone-/Xcode-programmering9

Aktive forum-tråde lige nu

Er det værd at have en "portfolio"-hjemmeside!?
Fejlkode i form af bip-lyde ved opstart af gammel stationær PC
MacBook gået ud ved indsættelse at IPhone SE…
Is Weed Legal in Europe
Buy real passport online|Buy counterfeit money
Chrome Auto Fyld holdt op med at virke
ÆØÅ
Tegne Program
Bygget med af v5.dk
© Copyright 2006-2023 • Forretningsbetingelser • Copyright • Persondata- og Cookiepolitik
v5.dk ApS - Åbogade 15 - 8200 Aarhus N - CVR: 36902833
v5.dk logo
Hej, vi hedder v5.dk og vi laver e-learning på dansk

v5.dk er sat i verden for at gøre teknologi tilgængeligt og anvendeligt for både professionelle og almindelige brugere på alle niveauer.

93 200 555
  Skriv til os
v5.dk bruger cookies til at huske dine indstillinger, livechat samt til statistik
 

Alle vores priser er inkl. moms Sikker SSL-beskyttet forbindelse

Dankort og Visa-Dankort  Visa  Mastercard og Mastercard Junior  Maestro

  • Produkter
  • v5.dk Premium
  • Cloud-servers
  • v5.dk
  • Om v5.dk
  • Kunderne siger
  • Kontakt os
  • Presse
  • Stay updated
  • RSS & tjenester
  • Søg på v5.dk
  • Sitemap