[GELÖST] Abfrage für "fließende" Auswahl

[_tom_sawyer_]

Hi,

wie müsste denn eine Abfrage aussehen, die folgendes bewerkstelligt:

- ich habe eine Auswahl an Produkten in einer Thumbnailliste
- klicke ich auf ein Thumbnail, dann öffnet sich der erste versteckte Layer mit dazu hinterlegten Detailinfos
- klicke ich auf ein 2. Thumbnail öffnet sich der zweite versteckte Layer, damit ich beide Produkte vergleichen kann
- klicke ich zum dritten Mal auf ein weiteres Thumbnail, dann sollen im ersten Layer die Inhalte für dieses Thumbnail getauscht werden, es geht also kein dritter Layer auf
- klicke ich ein viertes Mal auf ein Thumbnail, dann erscheint dieser Inhalt im 2. Layer
- wenn ich einen Layer manuell schließe, dann soll an dieser Stelle der Inhalt eines Thumbnails auftauchen, wenn ich erneut auf eines klicke

Schemenhafte Darstellung:

[layer 1 mit details (x)] [layer 2 mit details (x)]

[Tbn1] [Tbn2] [Tbn3] [Tbn4] [Tbn5] [Tbn6] [Tbn7] [Tbn8]

Wer kann mir hier weiterhelfen

Gruß
Tom

 

[SteelWheel]

Guten Morgen,

merke Dir in JavaScript a) ob Layer belegt sind (falls nein, auffüllen - das ist der letzte Punkt Deiner Liste) bzw. b) welche Layer belegt sind (ergänzt von einem Timestamp).

Jeder Klick auf ein Tbn nimmt dann den, der schon am längsten gezeigt wird wieder raus und zeigt sich selbst darin. Ist ein Layer leer und wird ein Tbn geklickt, wird er im freien Layer gezeigt.

Einfacher kann ich es Dir nicht erklären.

Viel Spaß und Gruß aus dem kalten Norden.


P.S.: Willkommen hier im Forum!

 

[_tom_sawyer_]

Danke schon mal, wenn du hierzu noch irgendwo ein kleines Beispiel hättest, wär's klasse

 

[SteelWheel]

Nö, das habe ich nicht, da Du eine individuelle Anforderung beschrieben hast. Ich habe nur mal aus der Hüfte geschossen, wie ich das gelöst hätte (damit es schnell geht). Tbn bekommt JavaScript-Links mit Funktionsaufruf und Übergabe der eigenen ID bzw. einem Zähler. Die Funktion prüft die Variablen wie beschrieben und ab die Maus ... eeeey ... komm schon ... ich sitze in der Agentur - kann jetzt keine fremden Sachen machen.

 

[_tom_sawyer_]

Hab jetzt mal was hinbekommen, sicherlich nicht super elegant, aber es tut das, was ich brauche

$(document).ready(function (){
				var selector = $(".inner-wrapper").find("a");

				var step = 1;
				var ID1;
				var ID2;

				$(selector).on("click",function (){

					if (step == 3) {
						step = 1;
					}

					if (step == 1) {
					 ID1 = $(this).parent().attr("id").replace(/id/, "");
					 console.log("id1: " + ID1);

					} else if (step == 2) {
						ID2 = $(this).parent().attr("id").replace(/id/, "");
						console.log("id2: " + ID2);

						if ( ID1 < ID2 ) {
							$("#l1").css({left: 0, right: "auto"});
							$("#l2").css({left: "auto", right: 0});
						} else if ( ID1 > ID2 ) {
							$("#l1").css({left: "auto", right: 0});
							$("#l2").css({left: 0, right: "auto"});
						}
					}
					step += 1;
				});
			});

<div class="layer" id="l1">Layer 1</div>
<div class="layer" id="l2">Layer 2</div>

<div id="id0"><a href="#">0</a></div>
<div id="id1"><a href="#">0</a></div>
<div id="id2"><a href="#">0</a></div>

 

[kkapsner]

Dein Vergleich zwischen den beiden IDs funktioniert nur bei gleichstelligen Ziffern wie gedacht, da ID1 und ID2 Strings und keine Zahlen sind. So ist "2" > "10"...

 

[_tom_sawyer_]

Danke für den Hinweis, hab noch parseInt() hinzugefügt.

 

[kkapsner]

... hoffentlich mit einer Basis.