Ergebnis 1 bis 7 von 7
  1. #1
    Nalia ist offline Mitglied
    registriert
    12-09-2013
    Beiträge
    31

    Cool Element mit Funktion dynamisch erstellen

    Hallo zusammen,
    ich grübel schon seit Stunden an diesem Problem herum:
    Ich erzeuge auf einer Seite dynamisch eine Reihe von Thumbnails. Die Bilder und ihre Informationen(Pfad, Beschreibung usw.) lade ich per JSON. Nun möchte ich aber auch das onclick-Event für jedes Thumbnail dynamisch erstellen, aber das funktioniert nicht, weil in der onclick-Anweisung die Daten der JSON-Abfrage nicht erkannt werden. Wie kann ich die übergeben?

    Hier mein Script:

    Code:
        var bbox = document.getElementById('bigbox');
        $.getJSON('json_dogs.php',function(result) {
            var j = 1;
            for(var i=0;i<result.length;i++) {
                var newI = document.createElement('img');
                newI.setAttribute('src','pics/dogs/minis/' + result[i].pic);
                newI.setAttribute('class','mpics');
                newI.setAttribute('id','dog'+i);
                newI.setAttribute('alt',result[i].hname);
                newI.onclick = function() {
                    var altpic = document.getElementById('picholder').firstChild;
                    altpic.src = 'pics/dogs/'+ result[i].pic;
                    document.getElementById('hname').innerHTML = result[i].hname;            }
                bbox.appendChild(newI);
    
                if (j == 5) {
                    var nZ = document.createElement('br');
                    bbox.appendChild(nZ);
                    j = 0;
                }
                j++;
            }
        })

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Element mit Funktion dynamisch erstellen

    Zitat Zitat von Nalia Beitrag anzeigen
    Nun möchte ich aber auch das onclick-Event für jedes Thumbnail dynamisch erstellen, aber das funktioniert nicht, weil in der onclick-Anweisung die Daten der JSON-Abfrage nicht erkannt werden. Wie kann ich die übergeben?
    Deine Beobachtung ist richtig, deine Schlußfolgerung nicht.

    Die Daten werden schon "erkannt", nur zu dem Zeitpunkt wo du die Funktion aufrufst, ist die Schleife längst durchgelaufen und daher hat das i einen Wert, der auf ein nicht vorhandenes Element zeigt.

    Es gibt in dem Fall mehrere Lösung, eine ist die Kapselung von i in einem dynamischen Funktionsaufruf.

    Code:
    newI.onclick = (function(i) {
         return function() {
                    var altpic = document.getElementById('picholder').firstChild;
                    altpic.src = 'pics/dogs/'+ result[i].pic;
                    document.getElementById('hname').innerHTML = result[i].hname;            
         };
    })(i);
    (ungetestet)

  3. #3
    Nalia ist offline Mitglied
    registriert
    12-09-2013
    Beiträge
    31

    AW: Element mit Funktion dynamisch erstellen

    Hmmmm....
    So ganz verstanden habe ich es noch nicht, aber es funktioniert!
    Also daher: ein ganz großes Dankeschön für die schnelle und kompetente Hilfe!
    LG
    Nalia

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Element mit Funktion dynamisch erstellen

    Ein .forEach() auf dem result-Array würde das Problem auch lösen. Ich finde das übersichtlicher als die verschachtelten Funktionen.

    Also anstatt der for-Schleife:
    Code:
    result.forEach(function(r){
    	// hier der gleiche Code, wie in der Schleife, nur dass jedes result[i] durch r ausgetauscht werden muss.
    });
    PS: Achtung. .forEach() wird nicht von älteren Browsern unterstützt, ABER das kann man umgehen, indem man sowas wie http://kkjs.kkapsner.de/modules/kkjs.Array.prototype.js einbindet.

  5. #5
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Element mit Funktion dynamisch erstellen

    Das klappt aber nur dann, wenn result ein Array ist.

  6. #6
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: Element mit Funktion dynamisch erstellen

    wenn result kein Array ist, jedoch iterierbar (z.B. eine NodeList oder HTMLCollection) dann übergibt man halt den Wert für [i]this[i] explizit:
    Code:
    // bzw. [].forEach(...)
    Array.prototype.forEach(function(r) {
        // ...
    }, result);

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Element mit Funktion dynamisch erstellen

    @ein schlauer: so wie der Code aussieht, bin ich davon ausgegangen... wer übergibt denn schon mit JSON ein Object, dass irgendwie so aussieht:
    Code:
    {
    	length: 4,
    	0: "null",
    	1: "eins",
    	2: "zwei",
    	3: "drei"
    }
    ?

Ähnliche Themen

  1. neues SVG-Element erstellen
    Von ax294 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 15-04-2009, 11:57
  2. Wie Pfad zu Element dynamisch erzeugen?
    Von FelsenJohn im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-03-2009, 13:54
  3. Scriptaculous, neues Element per JS erstellen
    Von dr_green im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 07-12-2007, 18:46
  4. Antworten: 2
    Letzter Beitrag: 12-10-2007, 15:11
  5. Antworten: 2
    Letzter Beitrag: 29-08-2007, 11:40

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •