JavaScript Inhalt aus Div an verschiedenen Ankern einfügen

[Phantro]

Hallo,

ich plage mich nun seit Tagen mit einem Problem im Bezug auf JavaScript.

Ich habe einen längeren Text mit Aufgabengebieten (Codebeispiel im „blubber“-Container) sowie Personen („a“-Tags im „blubber“-Container), welche diesen betreuen. Da es vorkommt, das eine Person mehrere Aufgaben begleitet, habe ich jeweils einen eigenen Div angelegt (Codebeispiel im „hide“-Container). Im Personen-Div sind dann noch weitere Conainer mit Bild der Person sowie Kontaktdaten, die beim hovern hinzukommen. Nun möchte ich es erreichen, das jeder Anker mit dem entsprechenden Div gefüllt wird.
Warum? Zum einen bleibt der Text übersichtlicher, zum anderen muss ich, sollte sich bei einer Person was ändern, nicht zig Container ändern, sondern nur einen.

Meine Idee war es, dies über eine „for“-Schleife zu lösen. Sprich, einmal alle „a“-Tags im „blubber“-Container ablaufen, Namen merken und dann am Anker jeweils den Div mit der ID analog dem Ankernamen einzufügen. Leider hab ich da wohl mehr oder weniger murks „gecodet“ bzw. habe vllt. auch den falschen Denkansatz?

Ich wäre froh, wenn mir jemand beim Lösen des Problems helfen könnte. Gerne auch mit Hinweisen/Tutorials, die ähnliches behandeln.
Via Google komme ich leider nicht weiter und mit den Tutorials bei SelfHTML und W3Schools leider auch nicht sehr weit.

Hier der Code:
(Namen erfunden, Text stark gekürzt, Zeile 1+4 sollte jeweils „Max Mango“ beinhalten, Zeile 2 "Nadine Keks" usw., CSS ist nicht komplett eingefügt - funktioniert aber, geht lediglich um das Javascript)

<div id="blubber">
1. textytext <a name="mm"></a> blubbb <br>
2. texter <a name="nk"></a> texty<br>
3. textilicicous <a name="gk"></a> <br>
4. textinator <a name="mm"></a> texted<br>
5. blubbt <a name="mr"></a> immernoch<br>
6. muuuh <a name="tz"></a> määäääh<br>
</div> 
 
<div id="hide">
<div id="gk">Gerd Knödel<div id="hover"><div id="bild">BILD</div>Kontaktdaten</div></div> 
<div id="mm">Max Mango<div id="hover"><div id="bild">BILD</div>Kontaktdaten</div></div>
<div id="nk">Nadine Keks<div id="hover"><div id="bild">BILD</div>Kontaktdaten</div></div> 
<div id="mr">Marc Roulade<div id="hover"><div id="bild">BILD</div>Kontaktdaten</div>/</div> 
<div id="tz">Tina Zitrone<div id="hover"><div id="bild">BILD</div>Kontaktdaten</div></div>  
</div>


<style>
#hide {visibility:hidden;}
</style>


<script>
 function namez() {
var elements = z("blubber").getElementsByName(xxx);
var numElements = elements.length;
var xxx=z("blubber").getElementsByTagName("a")
var z=document.getElementById;
 
for(var index = 0; index < numElements; index++) {
elements[index].innerHTML= z(elements).innerHTML;
}
}

namez()  
</script>

Viele Grüße aus Mannheim

 

[sianon]

Hi,
habe ich es richtig verstanden, dass beispielsweise

<a name="mm"></a>

nach Ausführen der JS-Funktion so aussehen sollte:

<a name="mm">Max Mango</a>

?

 

[Phantro]

Ja, hast du richtig verstanden.
Mir ist aber gerade aufgefallen, das ich einen Zusatz vergessen habe (durfte Text neu schreiben weil ich ausgeloggt wurde =( )

In den einzelnen Personen-Divs wird wie von dir gepostet der Name eingefügt und beim hover kommt dann ein Bild mit Kontaktdaten. Das ist alles in weiteren divs verschachtelt.

Ich ergänze das eben nochmal im Eingangstext

 

[sianon]

Hi nochmal,

ich würde dir empfehlen jQuery zu nutzen. Hier der Code der bei mir funktioniert hat:

<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">

      $(document).ready(function(){
             $("#blubber > a").each(function(){
                   $(this).html($("#" + $(this).attr('name')).html());
             });
      });  
        
</script>

P.S.: Den Hover-Effekt kannst du danach einfach mit CSS realisieren. Sollte noch Erklärungsbedarf bestehen, melde dich einfach. Alternativ könnte ich dir auch die reine JavaScript-Basisvariante posten, ich würde dir aber empfehlen grundsätzlich mit Frameworks zu arbeiten.

P.P.S: Ich würde zusätzlich dein HTML-Markup noch einmal überprüfen. Hier z.B.

<div id="mm“>

verwendest du zwei unterschiedliche Anführungszeichen. Außerdem hier noch der Link zum Einbinden von jQuery über Google:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 

[Phantro]

Hallo,

danke, werde das mit jQuery mal probieren.
Die unterschiedlichen Anführungsstriche kommen daher, das ich den Code aus dem CMS-Editor kopiert habe und in Word "bearbeiten" musste - nicht das ich nochmal ausgeloggt werde und alles neu schreiben darf Also da gibts kein Problem. Sieht aber sehr unschön hier aus, da geb ich dir recht.

Mit einer reinen JavaScript-Variante würde ich mich hier also eher unglücklich machen?


Edit:
Ich habe nun deine Script eingebaut und auch die externe Einlesevariante gewählt. Aber irgendwie ändert sich innerhalb des "a"-Tags nichts :-( Dazu muss ich aber auch sagen, das ich das jQuery Script an sicht nicht verstehe (habe mich damit bisher noch nicht befasst).

 

[sianon]

Ich kommentiere einfach mal den Code durch.

// Das $ ist ein Platzhalter für jQuery, du könntest ebensogut jQuery(document).ready( ... schreiben.
// Alles innerhalb von $(document).ready(function(){}) wird ausgeführt sobald die Seite fertig geladen ist

$(document).ready(function(){

// $("#blubber") entspricht document.getElementById("blubber")
// $("#blubber > a").each iteriert über alle Kindelemente der ersten Ebene (foreach-Schleife)

           $("#blubber > a").each(function(){

// Hier kann über $(this) auf das Element zugegriffen werden
// Zusammenfassung: Es wird über jeden a-Tag innerhalb deines blubber-Containers iteriert und jeweils folgende Zeile ausgeführt:

           $(this).html($("#" + $(this).attr('name')).html());

// $("#" + $(this).attr('name')): Innerhalb der Klammern wird der Selektor zusammengesetzt.
// Es würde zur Laufzeit z.B. so aussehen: $("#mm"), was in JS document.getElementById("mm") entspricht

// Mit der Funktion .html() ohne Übergabeparameter holst du dir den Inhalt des Elementes (innerHTML)

// Die Funktion .html("Wert") setzt den Inhalt des Elementes auf "Wert" (document.getElementById("beispiel-element").innerHTML = "Wert")

// Die Funktion .attr('name') gibt dir den Wert des Attributes 'name' zurück (in deinem Fall z.B. "mm")

// Einfachere Darstellung: 

var id = $(this).attr('name');
var element =  $("#" + id );
var zuSetzenderInhalt = element.html();
$(this).html(zuSetzenderInhalt);

});
});

P.S. Benutzt du Firebug o.ä. Entwicklertools und könntest mögliche Fehlermeldungen aus der Konsole hier posten?

 

[Phantro]

Danke für die Kommentierung.
Habe das eben auch nochmal mit Hilfe von "w3schools" versucht zu verstehen. In der Hinsicht liest sich das ganze schonmal nach dem Motto "easy to handle" :-) Also das reine Javascript ist komplizierter zu lernen. Nichts desto trotz muss man auch das erstmal verstehen :-)

Ich bin aktuell auf Arbeit, habe daher nur IE8, bekommen aber zum Glück bald n Systemupgrade

Die Fehlermeldung vom IE ist für die Katz. "Objekt unterstützt Eigeneschaft oder Methode nicht" Zeile 1240 Zeichen 1. Das wäre also genau dein Script was er nicht mag. Aber was genau? Keine Ahnung. Habe auch mal deine Variante ab Zeile 28 genutzt. Aber ebenfalls keine Änderung beim "a"-Tag

Edit: Ok, Fehlermeldung ist zwar nun weg aber dennoch ändert sich nichts :-(

Edit2: Kommando zurück, nun macht er es :-) Ich weiß zwar nicht was ich nun geändert habe (eigentlich nur "f5" gedrückt) aber es klappt :-) Mein herzlichen Dank :-)

 

[sianon]

Funktioniert das Skript denn unter dem Link, den ich gepostet habe?

P.S: Die Variante ab Zeile 28 bezieht sich nur auf diesen Part:

 $(this).html($("#" + $(this).attr('name')).html());

P.P.S: Alles klar, gerne. Ich nehme das Testskript dann wieder von unserem Server