JavaScript Variable de-/inkrementieren und für nächsten Durchlauf speichern

[sverebom]

Hallo,

ich bastel mir gerade mit JavaScript und Jquery eine einfache Galerie für meine Website. Da die Webseite aus nur einer Übersichts-Seite besteht, auf der mit "scrollTo" hin und her scrolle, und ich die inflationäre Verwendung von IDs vermeiden möchte, erfasse ich einfach mit jquery, welche Link in welcher Übersicht (jeweils eine Liste) geklickt wurde, um zu dem Element zu gelangen, das ich anzeigen möchte. Funktioniert soweit wunderbar, ich kann ausgehend von dem Link, der geklickt wurde, jeden gewünschten Inhalt aus einer weiteren Datei abrufen und anzeigen lassen.

Ich bin nun an der Stelle, an der ich mit "Vor" und "Zurück" durch die Bilder rotieren möchte. Dazu hole ich mir den Index des aktuellen Bildes als Startwert (check!) und verändere diesen Wert mit Klicks auf "Vor" oder "Zurück", um zu bestimmen, was geladen werden soll. Der Veteran hat sich schon erraten, was mein Problem ist: Ich muss diese Veränderung an dem Index-Wert nun irgendwie speichern und verfügbar halten, damit beim nächsten Klick auf "Vor" oder "Zurück" der Index des aktuelles Bildes als Referenz verwendet wird und nicht der Index, den ich beim initialen Aufruf übergeben habe.

Wenn ich also den Index "5" übergebe und ich treudoof eine einfache if-Anweisung schreibe (if "Link vor" dann Index++), dann kriege ich zwar beim ersten Klick auf "Vor" korrekterweise den Index "6", aber beim nächsten Klick auf "Vor", beginnt das Spielchen nicht mit dem Index "6" sondern wieder mit der übergebenen "5".

Ich nehme an, dass ich an der Stelle mit mehreren Funktionen arbeiten muss, von der mir eine einen neuen Index (stets den des aktuellen Bildes) ausspucken muss, aber ich weiß nicht so recht, wie ich das anfangen soll. Die vielen Codebeispiele und Erläuterungen im Web haben mich auch noch nicht zum Ziel geführt. Im Grunde brauche ich also vor allem jemanden, der mich ein wenig durch den Dschungel führt, während ich mir eine Lösung erarbeite.

$(document).ready( function() {
	$('div').scrollTo( 0 );
	$.scrollTo( 0 );

	$('#gal_menu a').click( function() {
		var indexItem = $(this).index();
		$('#items').data('indexItem', indexItem);

		$('#inform2').text(indexItem);
		$('#item').load('sample.html p:eq(' + indexItem + ')');
	})

	$('#item_menu a').click( function() {
		var indexClick = $(this).index();
		var indexItem = $('#items').data('indexItem', indexItem);
		
		Hier irgendwo muss wohl das geschehen, an dem ich im Moment scheitere			

		$('#inform3').text(indexItem);
	 });
});

Ich hoffe, dass ihr auch Kommentare erkennt, was da passiert. Im Moment, in der Testumgebung, spucke ich nur Variablen im HTML-Code aus, um zu testen, ob der Code die richtigen Variablen liefert.

P.S.: Ich bastele gleich auch mal schnell ein Sample in jfiddle zusammen und stelle es bereit.

 

[striker159]

ich weiß nicht, ob der internet explorer das unterstützt, aber bei firefox kannst du den localstorage verwenden.

function setVar(name,wert) {
return localStorage.setItem(name, wert);
}


function getVar(key,def){
var x = localStorage.getItem(key);
if (!x) { return def;}
else { return x; }
}

einfach den aktuellen index damit speichern und bei bedarf wieder abrufen
bsp
setVar('bildindex', 5);
bzw var a = getVar('bildindex', '0');

musst eigenlich nur beachten, dass im localstorage alles in strings umgewandelt ist. getItem(key) liefert also einen string zurück, auch wenn du eine zahl oder ein array gespeichert hast.

 

[Yuuri]

Lädst du die Bilder mit AJAX nach oder lädst du die komplette Seite neu (hab mit JQuery noch nicht viel am Hut gehabt)? Falls du AJAX verwendest, würde eine einfache globale Variable reichen. Sonst würde ich eher auf kurzzeitig verwendete Cookies setzen. Die Expire-Zeit kannst du dabei ja auf 10 Minuten oder irgendwas setzen, wodurch es in jedem Browser funktionieren sollte.

 

[sverebom]

@striker159
Das wäre praktisch das gleiche wie .data()-Methode in jquery, oder nicht? Mit dieser Methode wird eine Variable mit einem DOM-Element verknüpft und so global verfügbar gemacht, ohne eine globale Variable bemühen zu müssen. Diese Methode habe ich benutzt, um den Index des gewünschten Bildes in die Funktion für das slideshow-Menü hinüber zu retten:

$('#items').data('indexItem', indexItem);

Ich denke, mit der gleichen Methode könnte ich auch den Index des Bildes, der nach einem Klick im slideshow-Menü verändert wird, in einem Rutsch auch den Index aus der Funktion heraus ziehen und verfügbar halten.

$(document).ready( function() {
	
	// Aufruf der Funktion bei Klick im Slideshow-Menu
	$('#item_menu a').click( function() {
									  
		// Index des geklickten Links
		var indexClick = $(this).index();
		
		// Index des in der Übersicht ausgewählten Bildes
		var indexItem = $('#items').data('indexItem', indexItem);

		// Index 0 oder 1 teilen mit, ob "vor" oder "zurück" geklickt wurde.
		// Je nach Wahl wird "indexItem" de- oder inkrementiert und
		// anschließend das gewünschte Bild geladen.
		if (indexClick == 0) {
			indexItem--;
			$('#item').load('sample.html p:eq(' + indexItem + ')'); 
		} else {
			indexItem++;
			$('#item').load('sample.html p:eq(' + indexItem + ')');
		}	
	})
});

Das funktioniert natürlich nicht, weil bei jedem Aufruf der Funktion wieder ab aus dem Übersicht übermittelte Index gezählt wird. Ich muss doch eigentlich nur noch die global verfügbare Variable beim Durchlauf der Funktion verändern und speichern. Wahrscheinlich ist es total trivial und ich habe lediglich bei all den Codeschnipseln, die ich bei meiner Recherche aufgeschnappt habe, den Überblick verloren.

@Yuuri
Das geschient alles "on the fly" mit jquery. Der zu ladende Content liegt in einer separaten HTML vor, in der ich einfach mit der globalen Variable bzw. dem Index des zu ladenden Contents heraus filtere ("sample.html p:eq(indexItem") und lade. Geht das schon als AJAX durch?

Und ich habe auch gedacht, dass eine einfache globale Variable reicht. Ich scheitere im Moment daran, die nach dem Klick im Slideshow-Menü verändert Variable für den nächsten Mausklick/den nächsten Durchlauf der Funktion als neue Referenz bereit zu halten.

Ergänzung (29. Juli 2011)

Ich bin so was von bescheuert:

var global = {};
global.indexItem;

	
$('#item_menu a').click( function() {
    var indexClick = $(this).index();
		
    if (indexClick == 0) {
          global.indexItem--;
    } else {
          global.indexItem++;
    }

    $('#inform3').text(global.indexItem);
})

Die triviale Lösung lautet "global namespace", in dem ich die Variable hätte hinterlegen müssen (anstatt sie einfach nur mit der .data()-Methode verfügbar zu halten). Aber als n00b darf ich am Anfang wohl bescheuert sein.