Ga naar inhoud

Een waarde onthouden in jQuery


anoniem

Aanbevolen berichten

Hoe onthoud ik de waarde van een variable in jQuery het beste tijdens het laden van een nieuwe pagina? Ik lees indexnummers van menu-items/links uit die ik opsla en weer wil gebruiken op de nieuwe pagina, nadat er op de link is geklikt. In PHP zou ik een sessievariabele kunnen overwegen, maar dit is geen PHP :) Ik zit aan een cookie te denken, maar is dat geen overkill? Niet noodzakelijke informatie, maar voor wie de reden van deze vraag wil weten: Ik heb mbv jQuery een menu gemaakt met daarnaast een afbeelding. Als je nu met de muispijl over een menu-item hovered veranderd de afbeelding ernaast mee. Het principe is heel simpel: Bij een hover haalt hij het indexnummer van het menu item op, en vervolgens toont hij de afbeelding met het corresponderende indexnummer. So far so good, dat werkt allemaal prima. Maar wat er nu gebeurt is dat het start- of default indexnummer altijd 0 is. Dus als je daadwerkelijk op die link klikt, en je gaat naar een andere pagina, dan begint hij daar weer met index 0, dus hij laat weer keurig de eerste afbeelding zien, die correspondeert met de eerste link/menu-item Wat ik graag wil, is dat hij op die vervolgpagina terugkomt met de afbeelding die bij het betreffende menu-item hoort. Dus: menu-item 3 correspondeerd met afbeelding 3, en als ik daar werkelijk op klik, moet deze pagina met afbeelding 3 starten, en niet met afbeelding 0, zoals nu gebeurt.
Link naar reactie
Ik denk dat het veel simpeler kan dan met cookies Een simpel menu... [code:1:a6516b26d5] <ul id="menu"> <li><a href="index.html" id="menu_1">Home</a></li> <li><a href="biografie.html" id="menu_2">Biografie</a></li> <li><a href="contact.html" id="menu_2">Contact</a></li> </ul> <img id="banner" alt="banner" /> [/code:1:a6516b26d5] Dan in javascript: [code:1:a6516b26d5] window.onload = function(){ var src = ['home.jpg','biografie.jpg','contact.jpg']; var img = document.getElementById('banner'); var path = window.location.href; var filename = path.substring(path.lastIndexOf('/')+1); filename = filename.substring(0,filename.indexOf('.')); switch(filename) { case 'biografie': img.src = src[1]; break; case 'contact': img.src = src[2]; break; default: img.src = src[0]; } } [/code:1:a6516b26d5] Ik hoop dat je dit een goede oplossing vind.
Link naar reactie
Ja dat klopt, het zal ongetwijfeld goed werken en ik waardeer het ook zeer dat je zo meedenkt. Punt is dat het script dat ik al heb structureel anders in elkaar zit dan dit en praktisch zonder aanpassing in elke pagina kan worden geplakt. (Het heeft bijvoorbeeld ook nog een backend gedeelte waar je de afbeeldingen kan opgeven). Dat was ook een voorwaarde voor dit script, dat het universeel is en zonder aanpassingen overal gebruikt kan worden. Dus alles is zoals ik het hebben wil, op een ding na. En dat ene ding is op te lossen als ik de waarde van een variabele mee kan nemen naar een volgende pagina. Daarom ook dat ik voer cookies begon, want die doen in functie hetzelfde, een waarde onthouden tot je hem weer nodig hebt. Maar ik vraag me dus af of het niet eleganter kan.
Link naar reactie
Ik snap een deel van je redenatie niet. Begrijp ik goed dat je wil beginnen bij een afbeelding die afhankelijk is van de index van een link op de vorige pagina? En dat die index dus niet uniek is voor de pagina waar je je bevindt? Anders lijkt het mij een kwestie van de index bepalen aan de hand van het adres van de huidige pagina, of inderdaad gewoon een cookie. Ik zie niet precies in waarom dat overkill zou zijn. Het enige nadeel van cookies dat ik me kan bedenken is dat die informatie ook naar de server verstuurd wordt en weer terug naar de client, dus als optimalisatie zou je een van de lokale opslagtechnieken die HTML5 rijk is kunnen gebruiken. - Bas
Link naar reactie
Tnx Bas, dat heb je inderdaad helemaal goed begrepen. Het gaat eigenlijk alleen om de nieuwe defaultwaarde op de nieuwe pagina. Als je over een link hooverd wordt het indexnummer van die link opgehaald en de afbeelding met hetzelfde indexnummer getoond. Dat is op elke pagina hetzelfde en op elke pagina zijn de links en afbeeldingen hetzelfde. (Dus bijvoorbeeld de afbeelding met index 3 is op elke pagina ook hetzelfde) Nu start je op elke pagina altijd met de afbeelding met index 0. Maar ik wil dat mijn script 'weet' dat er daarnet op link nummer 3 is geklikt om hier te komen, en dat deze pagina dus met afbeelding 3 moet starten. Die defaultwaarde heb ik al in een variabele staan, maar die variabele staat bij elke pagina dus automatisch op 0. In PHP zou ik zoiets doen: Nu: $defaultImageIndex = 0 Gewenst: $defaultImageIndex = $_POST['linkIndex']; Je antwoorden zeggen ook precies wat ik wil, dus dat neem ik graag over. Ik ben mezelf nog steeds aan het ontwikkelen qua jQuery, vandaar dat ik me afvroeg of een cookie niet een 'groot' middel was voor dit doel. HTML5, daar begin ik liever niet aan. Ik vind dat alles wat ik bouw minstens probleemloos moet draaien onder IE7 en dan is HTML5 nog een verre post :) Hartstikke bedank!
Link naar reactie
  • 2 weken later...
In zo'n geval als dit zou ik een class 'active' toevoegen aan het menu item dat actief is. Dit zou ik dus regelen met php. Je zou dan ook gelijk daarmee het menu item kunnen stijlen zodat de user ook gelijk zien welk item active is. Daarna is het simpel, met jquery kan je dan bepalen welk menu item actief is en daarvan de index bepalen. Dus stel je hebt 3 menu items zoals hier: <a href='' class="menuItem">menuitem1</a> <a href='' class="menuItem active">menuitem1</a> <a href='' class="menuItem">menuitem1</a> Dan is het menu jquery nog een kwestie van: $(".menuItem").index(".active"); Ik zou er dus voor kiezen om het onthouden van je actieve menu over te laten aan php en vervolgens javascript dit af te handelen.
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...