ID einen Wert runter zählen

[Freund]

Hallo Freunde,

ich bräuchte mal Hilfe bei Javacript - ist leider nicht so mein Fachgebiet.
Und zwar möchte ich, dass ein vorhandenes Div durch ein neues Div ersetzt wird - mittels eines klicks auf einem Bild, welches im "zu verschwindenen Div" platziert ist. - na mitgekommen :o)

Also:
ich habe ein Bild in einem div mit der ID='2'.
Sobald der User auf das Bild klickt, soll das komplette div '2' samt Bild verschwinden und stattdessen ein div '1' auftauchen.

Sofern die Divs feste IDs bekommen, ist das ganze kein Problem:
...
<script type="text/javascript">
function details_auf()
         {
         document.getElementById(2).style.display = '';
         document.getElementById(1).style.display = 'none';
         }
</script>
...
Das Problem ist nur, dass die Divs keine festen Werte, sondern einen aufsteigenden Wert (ID) bekommen, da es unterschieldich viele dieser Divs geben wird.
Meine Idee war also, dass ich die übergebene ID in der Javascript funktion einfach nur einen herunter zähle:
...
<script type="text/javascript">
function details_auf(id)
         {
         document.getElementById(id).style.display = '';
         id--;
         document.getElementById(id).style.display = 'none';
         }
</script>
...
Das funzt so aber leider nicht. Wahrscheinlich, weil Javascript gar nicht weiß, dass es sich hierbei um einen Integer-Wert handelt.
Daher habe ich nochmal folgendes versucht, was aber auch nicht funktioniert:
...
<script type="text/javascript">
function details_auf(id)
         {
         document.getElementById(id).style.display = '';
         int num=id;
         num--
         document.getElementById(num).style.display = 'none';
         }
</script>
...
Wie kann ich es richtig machen, wo ist mein Denkfehler?

Vielen Dank für hilfreiche Tipps

Dein Freund

[Matthias Apsel]

Om nah hoo pez nyeetz, Freund!

* '2' ist keine gültige ID.
* möglicherweise kannst du auch auf JS verzichten. Zeige was du vorhast.

Matthias

[Vinzenz Mai]

Hallo Matthias,

* '2' ist keine gültige ID.

das stimmt für HTML5 nicht mehr:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#concept-id
http://www.w3.org/TR/2011/WD-html5-20110525/index.html#attributes-1

Freundliche Grüße

Vinzenz

[MudGuard]

Hi,

* '2' ist keine gültige ID.
das stimmt für HTML5 nicht mehr:
http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#concept-id
http://www.w3.org/TR/2011/WD-html5-20110525/index.html#attributes-1

und haben das auch schon alle Browser-Implementierer berücksichtigt?

An den Code-Schnippseln war aber auch nicht zu erkennen, ob HTML5 benutzt wird.

cu,
Andreas

[Vinzenz Mai]

Hallo Andreas,

* '2' ist keine gültige ID.
das stimmt für HTML5 nicht mehr:
http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#concept-id
http://www.w3.org/TR/2011/WD-html5-20110525/index.html#attributes-1

und haben das auch schon alle Browser-Implementierer berücksichtigt?

soweit ich mich erinnere, hatten die verbreiteten Browser der letzten Jahre sowieso kein Problem mit rein numerischen id-Werten.

An den Code-Schnippseln war aber auch nicht zu erkennen, ob HTML5 benutzt wird.

Es war aber auch nicht zu erkennen, dass HTML5 nicht benutzt wird :D

Freundliche Grüße

Vinzenz

[Freund]

Om nah hoo pez nyeetz, Freund!

* '2' ist keine gültige ID.
* möglicherweise kannst du auch auf JS verzichten. Zeige was du vorhast.

Ich habe es zwar inzwischen hinbekommen, doch da Du erwähnt hast, dass man es eventuel auch ohne Javascript hinbekommt, können wir das ja nochmal prüfen.

Es handelt sich im die Vorstellung einiger Mitglieder, die deim Aufruf der Unterseite lediglich mit großem Bild und dem vollen Namen innerhlab eines DIVs (ich nenne es mal 'a_$ausgabe' dargestellt werden. Klickt der User nun auf das Große Bild, wird das komplette DIV durch eine neues DIV ('b_$ausgabe') ersetzt und es erscheint neben einem nun sehr viel kleiner Bild diverse Details zur Person. Alle anderen Mitglieder werden weiterhin mit großem Bild dargestellt. Mit einem Klick auf das mini-Bild kann der USer die Detailansicht wieder schließen.

Wie gesagt, ich habe das ganze bereits gelöst, wäre aber interessiert, ob man das auch ohne Javascript hinbekommen könnte.

Mein Lösung:

function details_auf(id)
            {
            document.getElementById('a_'+id).style.display = 'none';
            document.getElementById('b_'+id).style.display = '';
            }
   function details_zu(id)
            {
            document.getElementById('a_'+id).style.display = '';
            document.getElementById('b_'+id).style.display = 'none';
            }

Besten Gruß

Dein Freund

[Matthias Apsel]

Om nah hoo pez nyeetz, Freund!

Wie gesagt, ich habe das ganze bereits gelöst, wäre aber interessiert, ob man das auch ohne Javascript hinbekommen könnte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8">  
<title>Mitglieder</title>  
<style type="text/css">  
  li {background-color: gold; width: 100px; height: 100px;  margin: 20px; display: inline-block; list-style-type: none; position: relative;}  
  div {background-color: green; width: 200px; height: 200px; position: absolute; left: -9999px; z-index: 2;}  
  #hover li:hover div, :target {top: 0; left: 0; }  
  li + li {z-index: 1;}  
  li + li + li {z-index: 0;}  
</style>  
</head>  
<body>  
<h1>variante hover</h1>  
<ul id="hover">  
  <li>Person 1<div>mehrere Infos zu Person 1</div></li>  
  <li>Person 2<div>mehrere Infos zu Person 2</div></li>  
  <li>Person 3<div>mehrere Infos zu Person 3</div></li>  
</ul>  
<h1>variante klick</h1>  
<ul id="click">  
  <li><a href="#details1">Person 1</a><div id="details1">mehrere Infos zu Person 1<a href="#">gelesen</a></div></li>  
  <li><a href="#details2">Person 2</a><div id="details2">mehrere Infos zu Person 2<a href="#">gelesen</a></div></li>  
  <li><a href="#details3">Person 3</a><div id="details3">mehrere Infos zu Person 3<a href="#">gelesen</a></div></li>  
</ul>  
</body>  
</html>

Matthias

[Gunnar Bittersmann]

@@Freund:

nuqneH

wäre aber interessiert, ob man das auch ohne Javascript hinbekommen könnte.

Entweder – wie Matthias schon sagte – mit Ankern und :target, was aber den Nachteil hat, dass das angewählte Element nach oben springt.

Oder mit (nicht sichtbaren) Radiobuttons und :checked. Markup:

<figure>  
  <input type="radio" name="person" id="control-johndoe"/>  
  <label for="control-johndoe">  
    <img src="johndoe.jpg" alt="John Doe"/>  
  </label>  
  <p>John Doe is a handsome man.</p>  
</figure>  
<figure>  
  <input type="radio" name="person" id="control-janeroe"/>  
  <label for="control-janeroe">  
    <img src="janeroe.jpg" alt="Jane Roe"/>  
  </label>  
  <p>Jane Roe is a lovely woman.</p>  
</figure>

Stylesheet (ansatzweise):

figure input  
{  
  position: absolute;  
  left: -9999px;  
}  
  
figure p  
{  
  display: none;  
}  
  
figure :checked~label img  
{  
  width: 42%;  
}  
  
figure :checked~p  
{  
  display: block;  
}

Qapla'