TD ein bzw ausblenden mit jquery

[Lefor]

moin,

ich habe in meinem tollen html dokument eine tablle mit tr's und td's

ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

hab dafür auch zwei noch tollere css klassen angelegt:

.showimage {
display: inline;
}

.hideimage {
display: none;
}

weiß aber gerade nicht wie ich das zum laufen bekommen soll.

würde mich über eure hilfe freuen.

lg
Lefor

[Linuchs]

moin,

ich habe in meinem tollen html dokument eine tablle mit tr's und td's

Ah ja, und was willst du mit JAVA im HTML erreichen? Oder meinst du Javascript?

ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

Okay, wenn du ein td ausblendest, rutschen die rechts davon auf. So soll es sein?

hab dafür auch zwei noch tollere css klassen angelegt:

.showimage {
display: inline;
}

.hideimage {
display: none;
}

Für Javascript kann ich es schreiben, aber mit jquery toggle kann ich gerade nichts anfangen.

Linuchs

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

Für Javascript kann ich es schreiben, aber mit jquery toggle kann ich gerade nichts anfangen.

[link:http://api.jquery.com/toggleClass/@title=toggleClass()] war gemain, was auch nicht anderes macht als [link:https://developer.mozilla.org/en-US/docs/Web/API/Element.classList@title=classList].toggle() in Vanilla-JS.

Qapla'

[MudGuard]

Hi,

ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.
.showimage {
display: inline;
}

Das ergibt keinen Sinn - wenn es eine Tabellenzelle ist, ist display: inline; falsch, dann müßte es display: table-cell; sein.

weiß aber gerade nicht wie ich das zum laufen bekommen soll.

Und woran scheiterst Du genau?
Welche Methode Du von jquery benutzen willst, weißt Du doch schon. Wo liegt also das Problem?

cu,
Andreas

[Gunnar Bittersmann]

@@Lefor:

nuqneH

ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

hab dafür auch zwei noch tollere css klassen angelegt:

Es gibt keine „CSS-Klassen“ (auch nicht mit Deppenlehrzeichen).

.showimage
.hideimage

Du möchtst nicht td-Elemente ausblenden, sondern deren Inhalte (Bilder)?

weiß aber gerade nicht wie ich das zum laufen bekommen soll.

Wie sieht denn dein Code aus, der nicht läuft?

Übrigens hast du dich in der Kategorie vertan.  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen …

Qapla'

[Lefor]

ops,

das kommt nicht wieder vor !

ja es geht um bilder in den td's

hatte das jetzt so:

$("td").click( function() {}
$(this).find("img").toggleClass("hideimage");

aber ich weiß nicht was ich genau falsch mache da einfach nix passiert.

lg
Lefor

[Gunnar Bittersmann]

@@Lefor:

nuqneH

hatte das jetzt so:

$("td").click( function() {}
$(this).find("img").toggleClass("hideimage");

aber ich weiß nicht was ich genau falsch mache

Die Fehlerkonsole deines Browsers sagt es dir. Eine Klammer geht nicht zu.

da einfach nix passiert.

Bei {} sollte das auch nicht verwundern. Eine Klammer geht an der falschen Stelle zu.

Und wie genau soll das Bild wieder sichtbar werden?

Qapla'

[Lefor]

Hey Gunnar,

schonmal Danke.

aber ich hätte das sicherlich nicht gepostet wenn ich selber drauf gekommen wäre :P

Die Bilder sind halt in einer TD und sollen per mausklick verschwinden und per mausklick wieder auftauchen.

lg
Lefor

[Gunnar Bittersmann]

@@Lefor:

nuqneH

Die Bilder sind halt in einer TD und sollen per mausklick verschwinden

Das hast du inzwischen hinbekommen?

und per mausklick wieder auftauchen.

Worauf soll man denn clicken?

Qapla'

[Lefor]

@@Lefor:

nuqneH

Die Bilder sind halt in einer TD und sollen per mausklick verschwinden

Das hast du inzwischen hinbekommen?

Nein, bin genauso am anfang wie vorher.

und per mausklick wieder auftauchen.

Worauf soll man denn clicken?

geht es nicht das wenn das bild weg ist man einfach auf der selben stelle nochmal klickt und es wieder da ist?

Qapla'

[Gunnar Bittersmann]

@@Lefor:

nuqneH

Nein, bin genauso am anfang wie vorher.

Und warum? Dass eine Klammer fehlt, hatte ich (wenn schon nicht die Fehlerkonsole) dir gesagt. Dass das, was du beim Eintreten des Events ausgeführt werden soll, innerhalb von { } stehen muss, auch.

geht es nicht das wenn das bild weg ist man einfach auf der selben stelle nochmal klickt und es wieder da ist?

Kommt drauf an, wie groß „dieselbe Stelle“ noch ist, wenn das Bild weg ist.

(Bei einer Tabellenzelle wird die Breite natürlich noch von den anderen Zellen in der Spalte und die Höhe noch von anderen Zellen in der Zeile bestimmt.)

Qapla'

[Lefor]

$("td").click( function() {
$(this).find("img").toggleClass("hideimage");
}
)

so?

[Gunnar Bittersmann]

@@Lefor:

nuqneH

$("td").click( function() {
$(this).find("img").toggleClass("hideimage");
}
)

so?

Sieht doch schon besser aus. Hinter der letzten ) sollte aber noch ein ; stehen.

Ungünstig ist, dass bei jedem Click auf ein (lies: jedes) td-Element darin nach img-Elementen gesucht wird.

Abhilfe: Nicht dem img, sondern dem td ($(this)) eine Klasse à la "hide-image-inside" geben bzw. wegnehmen. Im Stylesheet steht dann:
.hide-image-inside img { display: none }

Qapla'

[Lefor]

@@Lefor:

nuqneH

$("td").click( function() {
$(this).find("img").toggleClass("hideimage");
}
)

so?

Sieht doch schon besser aus. Hinter der letzten ) sollte aber noch ein ; stehen.

das ;ist bereits drinne. leider lassen sich die bilder noch nicht ein aus blenden

Ungünstig ist, dass bei jedem Click auf ein (lies: jedes) td-Element darin nach img-Elementen gesucht wird.

Abhilfe: Nicht dem img, sondern dem td ($(this)) eine Klasse à la "hide-image-inside" geben bzw. wegnehmen. Im Stylesheet steht dann:
.hide-image-inside img { display: none }

ja das wäre eine schönere lösung

Qapla'

[Gunnar Bittersmann]

@@Lefor:

nuqneH

leider lassen sich die bilder noch nicht ein aus blenden

Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

Qapla'

[Lefor]

@@Lefor:

nuqneH

leider lassen sich die bilder noch nicht ein aus blenden

Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

wieso klappt es dann bei mir nicht ?

Qapla'

[Gunnar Bittersmann]

@@Lefor:

nuqneH

Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

wieso klappt es dann bei mir nicht ?

Woher sollen wir das wissen? Wenn es nicht an dem von dir gezeigten Code liegt, dann wohl an dem nicht gezeigten.

Was sagt die Fehlerkonsole?

Qapla'

[lefor]

So,

der Code schaut jetzt so aus:

 $(document).ready(function(){  

$("td").click(function(){
$(this).find("img").toggleClass(".hideimage");
});
});

Konsole sagt mir jetzt auch nicht mehr viel ... aber funktionieren tut es klar nicht ;)

[Gunnar Bittersmann]

@@lefor:

nuqneH

der Code schaut jetzt so aus:

$(document).ready(function(){
         $("td").click(function(){
$(this).find("img").toggleClass(".hideimage");
});
});

Konsole sagt mir jetzt auch nicht mehr viel

Stimmt, kein JavaScript-Fehler. (Wolltest du nicht doch dem jeweiligen td-Element eine Klasse geben/wegnehmen?)

... aber funktionieren tut es klar nicht ;)

Vermutlich, weil du eine Klasse ".hideimage" vergibst, per Stylesheet aber Elemente der Klasse "hideimage" versteckst.

Qapla'

[Lefor]

Na ja die Bilder sind aktuell in einem TD und sollen per mausklick verschwinden.

Dann muss ich doch im JS teil die .hideimage klasse verwenden oder?

lg
Lefor

[Gunnar Bittersmann]

@@Lefor:

nuqneH

Na ja die Bilder sind aktuell in einem TD und sollen per mausklick verschwinden.

Dann muss ich doch im JS teil die .hideimage klasse verwenden oder?

Der (CSS-)Selektor '.hideimage' selektiert Elemente der Klasse "hideimage".

Elemente der Klasse ".hideimage" könnte man mit dem Selektor '.\.hideimage' selektieren. Aber derartige Klassennamen will man eher nicht.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Es gibt keine „CSS-Klassen“

Oh, wait. ;-)

Qapla'