Angeklicktes Element vergrößern

[Conkuist]

Hallo

Hab ein Problem das ich einfach nicht gelöst bekomme.

Hab hier mal ein Kleines Beispiel erstellt.
Hier könnt ihr es in Groß anschauen.

Wenn ich einen Block anklicke soll er seine höhe von 100 auf 150 Pixel ändern.
Wenn dann wieder ein anderer Block angeklickt wird soll er das selbe tun
und der andere Block soll seine Höhe wieder zurück auf 100 Pixel ändern.

Könnt ihr mir einen Tipp geben wie ich das hinbekomme?

Danke

 

[Tronjer]

Beim Klick werden erst alle Elemente auf 100 gesetzt und danach das aktuell angeklickte auf 150.

Du suchst wahrscheinlich nach: this

 

[Conkuist]

Verstehe nicht so ganz was du mir mit "this" sagen willst.

 

[Sempervivum]

Was Tronjer dir sagen will, ist, dass Du mit dem Bezeichner this das aktuelle, d. h. in diesem Fall das angeklickte Element ansprechen kannst.
So funktioniert es:

for (i = 0; i < l.length; ++i) {
l[i].addEventListener("click", function(){scale(this)}, false);
}

function scale(o) {
for (i = 0; i < l.length; ++i)
l[i].style.height = "100px";
o.style.height = "150px";
}

BTW 1: Wie ist das bei jsFiddle, kann dort jeder den Code ändern? Ich hätte es dort gern ausprobiert, wollte aber den Code von Conkuist nicht überschreiben.
BTW 2: Wo sind in diesem Forum die Code-Tags? Muss sie immer manuell einfügen.

 

[Conkuist]

Wenn du den Code auf JS Fiddle ergänz und dann auf Update drückst wird er in einer neuen Datei abgespeichert z.B. http://jsfiddle.net/9Y223/1/ etc.

Also wenns dir nichts ausmacht darfst du den Code gerne ergänzen.

Habe deinen Code hier in einem neuen Fiddle aber berreits ergänzt

 

[Sempervivum]

Und? Ist es das, was Du vorhattest?

 

[Conkuist]

Ja war genau das was ich gesucht habe.
Danke an alle für die schnelle Hilfe.

 

[Conkuist]

Hab da noch eine Idee die ich leider nicht umsetzen konnte

1.Wenn die Seite geladen wird soll der Erste Bock größer sein
2.Wenn man dann im Filter etwas auswählt und neue Blöcke geladen werden soll davon auch wieder der Erst größer sein.
(So als wäre der Block bereits ausgewählt worden)

Also 1. ist kein Problem allerdings habe ich keine ahnung wie ich 2. umsetzen soll.

 

[Tronjer]

2.Wenn man dann im Filter etwas auswählt und neue Blöcke geladen werden soll davon auch wieder der Erst größer sein.
(So als wäre der Block bereits ausgewählt worden)

Weiß zwar nicht, was du mit Filter meinst, aber versuche es doch mal mit jQuery. Damit kannst du Elemente ähnlich wie mit CSS ansprechen. Das ist einfacher.

//CSS
.foo {....}
.foo:first-child {....}

//jQuery
$('.foo').css({...});
$('.foo').eq(0).css({...});

 

[Sempervivum]

Wenn ich dich richtig verstehe, müsstest Du es in deinem Code ganz einfach einfügen können:

function test() {
if (aw.value == "all") {
for (i = 0; i < l.length; ++i) {
l[i].style.display = "block";
l[i].style.height = "100px";
}
l[0].style.height = "150px";
} else {
s = document.getElementsByClassName(aw.value)
for (i = 0; i < l.length; ++i)
l[i].style.display = "none";
for (i = 0; i < s.length; ++i) {
s[i].style.display = "block";
s[i].style.height = "100px";
}
s[0].style.height = "150px";
}
}

 

[Conkuist]

Danke für deine Antwort

Aber jetzt bin ich ein bisschen frustriert
eigentlich hätte ich auch selber auf die Lösung kommen können
Ist wohl doch nicht alles so kompliziert wie gedacht.
Und funktionieren tut auch alles super
Und du hast mir eine Menge rumprobieren erspart.

Noch eine Frage nebenbei wieso sieht das Dropdown Menü eigentlich nur in Firefox so aus
wie ich es im Style Bereich vorgegeben habe.
Internet Explorer und Chrome stellen es leider nicht korrekt dar.


Und hier nochmal der Link zum Fiddle
und hier zum anschauen