jQuery ein DIV anzeigen ein anderes verstecken

[Xerimi]

Hallo Leute

Ich habe folgendes Beispiel.
So wies jetzt ist funktioniert es, ich möchte nur eine Dynamische Version.

Ich möchte das picture1 und picture2... einfach nur "picture" heisst bei allen, falls ja mal mehrere hinzukommen.
Das gleiche mit hover1 und hover2... das ich nur "hover" habe.

Gibt es eine Möglichkeit die jQuery funktion umzuändern?

Mit $(this).next("div"); funktioniert es bei den "hover" aber wie geht es bei den "picture"?

  
<div id="square" style="width:370px; height:370px; border:1px solid #000;">  
    <div id="text">ALLE</div>  
    <div id="picture1" style="display:none;">BILD 1</div>  
    <div id="picture2" style="display:none;">BILD 2</div>  
</div>  
  
<div class="rollover">  
<div class="hover1">Hover 1</div>  
<div class="hover2">Hover 2</div>  
</div>  

  
<script>  
$('.hover1').mouseenter(function() {  
	$('#text').css('display','none');  
	$('#picture1').removeAttr('style');  
});  
$('.hover1').mouseleave(function(){  
	$('#picture1').css('display','none');  
	$('#text').removeAttr('style');  
});  
  
$('.hover2').mouseenter(function() {  
	$('#text').css('display','none');  
	$('#picture2').removeAttr('style');  
});  
$('.hover2').mouseleave(function(){  
	$('#picture2').css('display','none');  
	$('#text').removeAttr('style');  
});  
</script>  

Vielen Dank im Voraus
Gruss
Xerimi

[Georg]

Hallo Leute

Ich habe folgendes Beispiel.
So wies jetzt ist funktioniert es, ich möchte nur eine Dynamische Version.

Tipp: Vermutlich steht $ für getElementById

[suit]

Tipp: Vermutlich steht $ für getElementById

Nein.

[Xerimi]

Hat jemand eine Idee wie man es besser lösen könnte?

Wäre sehr Dankbar
Grüsse
Xerimi

[suit]

Hat jemand eine Idee wie man es besser lösen könnte?

eq(), index() oder[1] nth-child()

[1] nein, das ist kein XOR

[Xerimi]

eq(), index() oder[1] nth-child()

Danke, werde ich dan mal ausprobieren

[molily]

Hallo,

Mit $(this).next("div"); funktioniert es bei den "hover" aber wie geht es bei den "picture"?

Hole die aktuelle Position des hover-Elements in seinem Container und suche das picture-Elemente mit demselben Index.

<div id="square" style="width:370px; height:370px; border:1px solid #000;">
    <div id="text">ALLE</div>
    <div id="picture1" style="display:none;">BILD 1</div>
    <div id="picture2" style="display:none;">BILD 2</div>
</div>

<div class="rollover">
<div class="hover1">Hover 1</div>
<div class="hover2">Hover 2</div>
</div>

  
Sinnvollerweise lässt man die Galerie auch ohne JavaScript funktionieren. Das Markup sollte keine DIV-Suppe sein, sondern auch ohne JavaScript eine nutzbare Struktur ergeben.  
  
Man kann sich überlegen, wie man diese aufbaut. Man kann z.B. mit zwei Listen arbeiten, von denen eine Links zu den Bildern in der zweiten enthält. IDs zu nutzen, um Anker für die Links zu haben, ist gar nicht so verkehrt, auch wenn es nicht so schön wartbar ist.  
  
Oder besser man zeichnet die Elemente mit figure und figcaption aus. Dann ist es im JavaScript ebenfalls einfach, das zugehörige Bild einzublenden.  
  
~~~html
<ol id="bildergalerie">  
  <li>  
    <figure>  
      <img src="..." alt="...">  
      <figcaption>...</figcaption>  
    </figure>  
  </li>  
  ...  
</ol>

Wenn man diese Struktur hat, kann man sich ans CSS und ans JavaScript machen. Man blendet mit JavaScript die img-Elemente aus und beim Hover auf die zugehörige figcaption wieder ein. Wo sie dann positioniert werden, ist Sache des CSS. Von der figcaption zum zugehörigen img zu kommen ist einfach, beispielsweise mit $(this).prev() im hover-Event-Handler.

Damit man die HTML5-Elemente figure und figcaption im IE < 9 nutzen kann, braucht man ein zusätzliches kleines JavaScript.

Mathias