[javascript/jQuery] Controle probleem

[kleautviool]

Ik ben bezig om met behulp van linkjes door afbeeldingen heen te lopen. Alles lijkt (mij althans) goed te moeten werken, maar iets denkt daar anders over.

Aan de hand van de huidige positie (currPosition) wordt de nieuwe positie (newPosition) van de volgende afbeelding bepaald. Alle variabele werken goed, die controleer ik met een alert() maar het probleem zit hem in de links.

• Als ik op de eerste afbeelding klik krijg ik geen enkele link
• Als ik op de middelse afbeelding klik krijg ik alleen een 'previous' link
  • Als ik vervolgens op deze link klik kom ik wel bij de eerste afbeelding, maar dan met een 'previous' én een 'next' link
  • Als ik vanaf hier dan weer op 'next' klik blijft bij alle afbeeldingen een 'previous' én 'next' link staan
• Als ik op de laatste afbeelding klik krijg ik bij alle andere afbeeldingen (ook de eerste) alleen een 'previous' link

Ik gebruik onderstaande code:

JavaScript:

var newPosition = currPosition;
$(".imageNavLink").click(function(event){
 event.preventDefault();
 newPosition = (this.rel == "next") ? newPosition + 1 : newPosition - 1;
 var newImageLink = this.title;
 var clickAction = this.rel;
 var newImage = new Image();
 $(newImage).load(function(){
  newWidth = this.width, newHeight = this.height+35;
  if(newPosition == totalItems){
   [.. Show 'previous' link ..]
  }else if(newPosition == 1){
   [.. Show 'next' link ..]
  }else{
   [.. Show 'previous' and 'next' link ..]
  }
 });
 newImage.src = this.title;
});

Als ik de boel op de volgende manier controleer, verrandert alleen de waarde van newPosition

JavaScript:

alert(currPosition+" -> "+newPosition+" -> "+totalItems);

Ik snap het even niet meer

[R4gnax]

Zonder wat extra context waarbinnen dit script gebruikt wordt, kunnen we denk ik weinig zeggen. Waar komt currPosition vandaan? Waar komt totalItems vandaan? Nogal wiedes dat die niet van waarde zouden veranderen als je nergens er een andere waarde aan zou toekennen...

Er zijn wel een paar algemene dingen die ik je al kan vertellen.
Ten eerste is je code smerig opgezet en moeilijk leesbaar. Doe iets aan de leesbaarheid, want anders ga je jezelf over een maandje achter de oren krabben als je dit gedrocht zelf terug moet gaan lezen, zeker als het een onderdeel is van een groter, meer complex, gebeuren.

Ten tweede ga je veel te kort door de bocht met het asynchroon inladen v/e plaatje; wat gebeurt er bijvoorbeeld als het plaatje in kwestie niet correct geserveerd wordt? Nu in elk geval niets. Doe iets aan robuustheid, dus.

Ten derde (en dat is niet slechts een kwestie van smaak) zou ik altijd de langere $().bind() vorm gebruiken i.p.v. de shorthand $().click(), $().load(), etc. versie. Dat houdt alles netjes gestructureerd en schoon en geeft je de mogelijkheid om later extra event namen eenvoudig toe te voegen of event namespaces toe te voegen.