mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 26.04.2024 15:14 Benutzername: Passwort: Auto-Login

Thema: JavaScript toggle mit zwei verschiedenen Klassen vom 28.10.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> JavaScript toggle mit zwei verschiedenen Klassen
Seite: 1, 2  Weiter
Autor Nachricht
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 28.10.2011 13:44
Titel

JavaScript toggle mit zwei verschiedenen Klassen

Antworten mit Zitat Zum Seitenanfang

Hi, habe folgendes Problem:

Habe in css eine Klasse .projects in der div klasse ist noch eine klasse .textbox.
diese project boxen liegen im HTML untereinander und in jeder project box ist eine textbox vorhanden.
Ich will mit jquery die project box aufklappen und die dazugehörigen textbox soll deckkraft erhalten.

Funktioniert soweit alles, dass Problem ist nur was muss ich in jquery schreiben damit er nur die textbox zur zugehörigen projects box sichtbar macht. Wenn ich im moment auf eine Projects box klicke geht nur diese auf (das passt) und alle textboxen werden sichtbar...

(würde gerne (this ".textbox") schreiben, geht aber nicht *zwinker*)

Das habe ich bisher:

script
Code:

$(".projects").toggle(
   function() {
   $(this).animate({height: "140px"}, 500)
   $(".projects .textbox").animate({opacity: "1"}, 500)},
   
   function() {
   $(this).animate({height: "50px"}, 500)
   $(".projects .textbox").animate({opacity: "0"}, 500)
    });


css
Code:
.projects {
   float:down;
   display:inline-block;
   width:750px;
   height:50px;
   z-index:150;
   overflow:hidden;
   margin-bottom:10px;
   
}

.projects .textbox {
   float:right;
   
   width:300px;
   height:auto;
   padding:0px;
   z-index:100;
   opacity:0;
}



Danke für die hilfe
  View user's profile Private Nachricht senden
Alex

Dabei seit: 29.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Fr 28.10.2011 14:14
Titel

Antworten mit Zitat Zum Seitenanfang

mach mal aus den zeilen

Code:
 $(".projects .textbox").animate({opacity: "1"}, 500)},


das hier:

Code:
 $(" .textbox", this).animate({opacity: "1"}, 500)},


mit der ersten zeile sprichst du ALLE .textbox an, mit der zweiten zeile nur .textbox innerhalb der .projects in der du dich zur Laufzeit befindest.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 28.10.2011 14:36
Titel

Antworten mit Zitat Zum Seitenanfang

danke, genau das wars!
war ich ja gar nicht soweit weg davon...

jetzt is mir grad nur was aufgefallen... wenn ich nen link in der textbox anklicke fährt sie wieder zusammen weil ich ja auch auf die .project box geklickt hab, kann ich das irgendwie unterbinden?

danke nochmal
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Fr 28.10.2011 14:55
Titel

Antworten mit Zitat Zum Seitenanfang

Benutze kein toggle bzw. toggle mit explizitem Parameter true/false * Keine Ahnung... *
  View user's profile Private Nachricht senden
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 28.10.2011 16:06
Titel

Antworten mit Zitat Zum Seitenanfang

okay, der link befindet sich in der .textbox wird also die textbox geklickt darf nichts passieren...
Bin mir ziemlich sicher das es so funktionieren müsste, hab da aber leider schon wieder irgendwo nen syntax fehler drin...

Code:

$(".projects").toggle(
   if($(".projects .textbox", this).click(function(event))==true){}
   else{
   function() {
   $(this).animate({height: "140px"}, 500)
   $(" .textbox", this).animate({opacity: "1"}, 500)},
   
   function() {
   $(this).animate({height: "50px"}, 500)
   $(" .textbox", this).animate({opacity: "0"}, 500)
    }});


er bringt nen fehler in Zeile 2 bei der If abfrage...
  View user's profile Private Nachricht senden
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Fr 28.10.2011 16:44
Titel

Antworten mit Zitat Zum Seitenanfang

gewöhn dir mal ordentliche notation mit vernünftiger indentation an, dann fällt dir sofort auf, dass dein klammergeraffel nich korrekt is.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 28.10.2011 17:28
Titel

Antworten mit Zitat Zum Seitenanfang

sorry habs mir jetzt paar mal durchgeschaut ich find den fehler nicht.
  View user's profile Private Nachricht senden
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Fr 28.10.2011 17:33
Titel

Antworten mit Zitat Zum Seitenanfang

du sollst nich kucken, sondern vernünftig eingerückten code schreiben. grundsätzlich is das, was du da mit dem click event handler machst, augenscheinlich nich regulär.

Zuletzt bearbeitet von DEKONSTRUKTIV am Fr 28.10.2011 17:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS Selektor bauen für TR-tag mit zwei Klassen
Zwei CSS-Klassen auf einem Tag in E-Mail-Newsletter
Illustrator CS3: Pfad + zwei verschiedenen Endpunkt-Stärken
OSM/Javascript: Marker auf verschiedenen Layern anklicken?
CSS: links in klassen definieren -pseudoklassen in klassen?
Zwei Selectboxen, Javascript und wechselnder Inhalt
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.