Javascript Objektzeiger zu diesem

Question

Ich habe ein Array von Klassen in Javascript, jede Instanz erstellt wird, übergeben Sie den Namen einer MP3-Datei. Die Idee ist, dass jede Instanz ein "unsichtbares" Audioelement und ein Div erstellt. Wenn du auf das Div klickst, dann ist es Audio.

Dies ist eine vereinfachte Version der Klasse ... Jeder Versuch, einen Zeiger auf die entsprechende Klasse an die "onclick" -Funktion zu übergeben, ist fehlgeschlagen .. "this" offensichtlich fehlgeschlagen, das folgende Beispiel schlägt fehl .. Ich habe das Problem provisorisch gelöst, indem ich die Klasse ein "idx" und dann den div.onclick übergebe, also "finde es selbst", aber ich bin mir sicher, dass es eine elegantere Lösung gibt, dem div einen Verweis auf das passende Audio zu geben Element zum Spielen.

function myClass (mp3file) { 
    this.aud = document.createElement('audio'); 
    this.aud.src = mp3file; 
    this.div = document.createElement('div'); 
    this.div.className = 'dictDiv';  
    this.context = this; 
    this.div.onclick = function() { 
     context.aud.play(); 
    }   
} 

Answer 1

var context = this; 
this.div.onclick = function() { 
context.aud.play(); 
} 

Onclick überschreibt diese, so mit dieser Arbeit würde nicht funktionieren. Sie können es im Rahmen speichern (siehe oben) oder außer Kraft setzen die diese Bindung:

this.div.onclick=function(){ 
this.div.appendChild(this.aud); 
this.aud.play(); 
}.bind(this); 
document.body.appendChild(this.div);