The Power of THIS

html.de-Forum JavaScript
1

Wie sicherlich alle wissen ist das kleine Schlüsselwort this überaus mächtig…
Ich brauche es in meiner kleinen Slideshow nun um die Bilder mit Hilfe eines onClick-Events in das Hauptfenster zu „kopieren“, wobei es eigentlich neu geladen wird… (Ich werde es noch effizienter gestalten)
Wie auch immer. In 2 von 3 getesteten Browsern funktioniert das Script wirklich gut. Und ganz bestimmt könnt ihr euch denken, welcher Browser „mockt“ (wie ich sage):
Der Microsoft Internet Explorer.
Selbst YouTube hat damit ein paar macken. Es nervt bei CSS und auch bei JS…

Zum eigentlichen Problem:
This repräsentiert in meinem Code jeweils das Bild. Aber natürlich nicht im MSIE, dort stellt es das Window-Objekt dar…
Hat jemand nen Peil, wie ich das jetzt hinkriege…?

Nachfolgend der Code:
[HTML] for( var i = 0; i <= slideshows.length; i++ ) {
// Irrelevanter Code
for( var j = 0; j < slideshow.images.length; j++ ) {
var image = slideshow.images[ j ];

			// Create the thumbnail
			var thumb = document.createElement( "IMG" );
			thumb.src			= image.src;
			thumb.alt			= image.alt;
			thumb.slideshow		= slideshow;
			thumb.style.margin	= "10px";
			thumb.id			= "" + i + j;
			if( thumb.addEventListener ) {
				thumb.addEventListener( "load", function( ) { imgResize( this ); }, false );
				thumb.addEventListener( "click", function( ) { slideshow_select( this ); }, false );
			}
			if( thumb.attachEvent ) {
				imgResize( thumb );
				thumb.onClick = function( ) { slideshow_select( this ); };
				//thumb.attachEvent( "onclick", function( ) { slideshow_select( thumb ); } );
			}
			
			slide.appendChild( thumb ); // Die Slide wurde vorher erstellt
		}

// Der Event Handler
function slideshow_select( imgObj ) {
var slideshow = imgObj.slideshow;
var headline = slideshow.headline;
var main = slideshow.main;
var slide = slideshow.slide;

main.innerHTML = "";

var image = document.createElement( "IMG" );
image.src		= imgObj.src;
image.alt		= imgObj.alt;

main.appendChild( image );

}
[/HTML]
Seit heute morgen sitze ich an diesem Problem…

Danke für jede Hilfe im Vorraus!

mfG DarkDragon1993

2

Mittels Closure:

thumb.attachEvent( "onclick", function (that) { return function() { slideshow_select.call(that)  } }(this));

Oder mittels dem inzwischen standardisierten und bald implementieren Function.prototype.bind:

[code]if (typeof Function.prototype.bind === „undefined“) {
Function.prototype.bind = (function(){

var _slice = Array.prototype.slice;

return function(context) {
var fn = this,
args = _slice.call(arguments, 1);

if (args.length) { 
  return function() {
    return arguments.length
      ? fn.apply(context, args.concat(_slice.call(arguments)))
      : fn.apply(context, args);
  }
} 
return function() {
  return arguments.length
    ? fn.apply(context, arguments)
    : fn.call(context);
};

}
})();
}[/code]

thumb.attachEvent( "onclick", slideshow_select.bind(this));
3

Vielen Dank! Klappt super!