Iterieren durch Klassen zu verstecken/zeigen

Ich habe mehrere divs mit Klasse "Bild" und mehrere mit Klasse "thumbnail" (beide können variabel sein basierend auf Menge Benutzer fügt aber immer Thumbnail wird generiert mit Bild und ist immer in der gleichen Reihenfolge erste Daumen kamen aus erstem Bild) ich habe alle Daumen divs versteckt, aber die ersten bereits mit:Iterieren durch Klassen zu verstecken/zeigen

$('.image:not(:first)').hide();

ich durch Thumbnail-Klasse wiederholen will und habe es zweites Bild zeigen und andere ausgeblendet, wenn ich 2.e Daumen klicken , 3. Bild, wenn ich 3. Daumen, etc.

wie würde ich das in jQuery tun?

Quelle

2012-03-29 Lukasz

Es klingt wie die Funktionalität, die Sie ähnlich wollen, ist zu einem [Karussell] (http://www.agilecarousel.com/flavor_2.htm). Ich würde vorschlagen, einige Jquery Karussell-Plugins zu betrachten. – Danny

Ich möchte Karussell, aber mit all dem dynamischen Inhalt ist es schwer etwas zu finden, das dafür verantwortlich ist. – Lukasz

Sie müssen einige Mittel zur Verknüpfung der beiden zusammen erstellen. In diesem Beispiel verwende ich den Index des Elements. Sie können dann CSS-Klassen verwenden, um den Anzeigezustand umzuschalten.

http://jsfiddle.net/ZCuYM/1/

$('.thumb').click(function() { 
    //switch active thumb 
    $('.thumb.active').removeClass('active'); 
    $(this).addClass('active'); 

    //switch active image 
    $('.image.active').removeClass('active'); 
    $('.image').eq($(this).index()).addClass('active'); 
});

Quelle

2012-03-29 20:01:16 mrtsherman

Ok, das funktioniert offensichtlich in deinem Beispiel. Aus irgendeinem Grund kann ich es nicht lokal arbeiten lassen. Ich habe einige dieser Elemente in anderen Elementen verschachtelt, würde dies Auswirkungen auf den Code haben? Ich kann alarmieren, damit jQuery funktioniert, aber die .click-Funktion scheint nicht zu funktionieren. Schon mal versucht, einfach auf andere Elemente zu klicken, und scheint nicht zu funktionieren? – Lukasz

So würde ich debuggen. Stellen Sie zuerst eine Warnung in die Daumenklick-Funktion. Dann würde ich mir diese Fragen stellen. Hast du ein Element mit der Klasse 'thumb'? Als nächstes, wenn Sie auf einen "Daumen" klicken, gibt es etwas im Daumen, das ein Klicken von der Registrierung verhindern würde? Zum Beispiel ein anderer Click-Handler mit 'preventDefault()' oder 'cancelBubble()'. Gibt es etwas darüber, das das Klickereignis stehlen würde? Zum Beispiel ein unsichtbares Element. Wenn du einen Link zu deiner Seite posten kannst, schaue ich mir das an, aber das Debugging über die Interwebs macht keinen Spaß! – mrtsherman

ahh. Ich habe eine Warnung verwendet, aber sie hat nicht funktioniert, weil sie außerhalb einer bereits vorhandenen .ready-Funktion war. Ich wusste nicht, dass alles drin sein musste, Dummkopf. das funktioniert aber jetzt perfekt. Danke für die extra Hilfe, du hast mir große Kopfschmerzen erspart! – Lukasz

Wenn Sie auf dem zweiten Bild klicken möchten und das zweite Bild zeigen, während andere versteckt, sollte der Code unten tun:

<div class="image"></div> 
<div class="thumb"></div> 
<div class="image"></div> 
<div class="thumb"></div> 

$('.thumb').click(function() { 
    $('.image').hide(); 
    $(this).prev('.image').show(); 
});

In diesem Fall, wenn Sie ein .thumb klicken, werden alle .image Elemente versteckt und das .image vor dem gerade angeklickten .thumb wird angezeigt. Wenn Sie Elemente in Echtzeit hinzufügen, sollten Sie die Verwendung von .on() für das Klickereignis in Betracht ziehen.

Quelle

2012-03-29 19:58:13

Iterieren durch Klassen zu verstecken/zeigen

Antwort

Verwandte Themen