| 

.NET C# Java Javascript Exception

4
Moin allerseits.

Ich habe mit eine Klasse programmiert, die bestimmte Elemente im festgelegten Abstand slidet. Es handelt sich im Prinzip um die klassische Darstellung von Banner-Werbung (es können sowohl gifs/pngs als auch Flash-Dateien nacheinander angezeigt werden).

Dafür habe ich mir eine Klasse angelegt:
function _banner() {
$flba = this;
}

Jedes Objekt hat ein Set an Optionen:
_banner.prototype.options_set = {
time:0,
counter:0,
loopActive:false,
type:0,
typeIs:'blind',
obj:{},
picNum:0,
/* wenn 0 - kein Start, wenn 1 - ein Durchlauf, wenn 2 - unendlich */
loop:0,
timeout:{}
};

Da es aber pro Seite mehrere Banner geben hat, soll jeder Banner seine eigenen Optionen haben. Deshalb lege ich ein leeres Optionen-Objekt an:
_banner.prototype.options = {};


Nach der Definition aller Methoden, rufe ich die Klasse auf:
var banner = new _banner();

Mithilfe von jQuery interpretiere ich jetzt diverse HTML-Bereiche und belege die einzelnen Optionen für die jeweiligen Banner:
$.fn.banner = function()
{
var thisbanner = {};
$(this).find('.banner').each(function()
{
thisbanner = $(this);
var index = thisbanner.attr('id'); // jeder Banner hat eine ID
banner.options[index] = banner.options_set; // Erstmal werden die Standardoptionen geladen
banner.options[index].time = thisbanner.attr('time')*1;
banner.options[index].type = thisbanner.attr('type')*1;
banner.options[index].loop = thisbanner.attr('animation_loop')*1;
banner.init(thisbanner,index); // jetzt wird der Banner initialisiert (d.h. ggf. autoplay)
});
};

Diese jQuery-Funktion wird mit $('body').banner() aufgerufen.

Das Problem:
Wenn ich jetzt nach der Schleife versuche banner.options auszugeben,
alert(JSON.stringify(banner.options));
bekomme ich ein Objekt, mit den richtigen Indizes aber alle Eigenschaften sind identisch.

Versuche ich dagegen in der init()-Methode Folgendes auszugeben:
alert(JSON.stringify($flba.options));
, sehe ich, was da mit jedem Durchlauf passiert (die init()-Methode wird ja in einer Schleife aufgerufen):
Mit jeden Durchlauf kommt ein Unter-Objekt dazu. Komischerweise bekommen aber alle vorhergehenden Unter-Objekte dieselben Eigenschaften, wie das letzte.

Also:
ich erwarte, dass am Ende so ein Objekt rauskommt:
{
'banner_1':
{
// Unter-Objekt für Banner 1
},
'banner_2':
{
// dasselbe für Banner 2
}
}

Aber stattdessen werden immer alle vorhergehenden Objekte mit dem zuletzt angefügten überschrieben.

Was mache ich falsch? Kann mir jemand einen Hinweis geben? Ich habe es auch schon versucht, ein Objekt banner zu eröffnen und dann für jeden Wert ein neues Objekt der Klasse _banner zu erzeugen.
Also so:
var banner = {};

und in der Schleife dann
banner[index] = new _banner();

Klappt auch nicht.
News:
10.06.2011
johny7 471 1 8
1 Antwort
3
Versuch es mal mit:

_banner.prototype.options = [];

Wenn das nicht geht erstell doch bitte ein Beispiel unter jsfiddle.net und poste den Link dazu hier.

Nachtrag:

Noch ein kleiner Veränderungsvorschlag für die "options"-Inizialisierung:
banner.options[index] = jQuery.extend(true, {}, banner.options_set, {
time : thisbanner.attr('time')*1,
type : thisbanner.attr('type')*1,
loop : thisbanner.attr('animation_loop')*1
});

Finde ich besser zu lesen und übersichtlicher.

Erklärung zu jQuery.extend
Erstmal ein paar Auszüge aus der jQuery-API:
Merge the contents of two or more objects together into the first object.

jQuery.extend( [ deep ], target, object1, [ objectN ] )

deep If true, the merge becomes recursive (aka. deep copy).
target The object to extend. It will receive the new properties.
object1 An object containing additional properties to merge in.
objectN Additional objects containing properties to merge in.

jQuery.extend nimmt eine Liste von Objekten entgegen und merged diese zusammen.

In meinem Beispiel also

jQuery.extend(true, {}, banner.options_set, {
time : thisbanner.attr('time')*1,
type : thisbanner.attr('type')*1,
loop : thisbanner.attr('animation_loop')*1
});

"{}" (also ein leeres Objekt) wird mit "banner.options_set" gemerged und im Anschluss wird ein neues Objekt erzeugt welches die Eigenschaften "time","type","loop" hat und dieses Objekt wird wiederrum mit dem Ergebnis des vorherigen merges gemerged.
Der merge funktioniert immer von links nach rechts und überschreibt in dieser Richtung auch alle vorherigen Werte.
Ist etwas schwierig zu erklären. Vielleicht schaust du dir einfach mal die API-Referenz und ihre Beispiele an: jQuery.extend
10.06.2011
Floyd 14,6k 3 9
Floyd 14,6k 3 9
Ich probiers, aber erst nach dem WE.

Deine Variante der Initialisierung kenn ich nicht. Bin aber auch noch kein JS-Experte. Ist das eine alternative Syntax für exakt dasselbe Verhalten? Kannst Du sie mir etwas erläutern?
johny7 10.06.2011
Wenn ich das was du da tust, richtig verstanden habe (und davon gehe ich mal aus) dann kann ich deine Frage mit Ja beantworten. Die Erklärung hab ich der Antwort hinzugefügt.
Floyd 10.06.2011
1
Danke für die Erklärung, ist soweit verstanden.
Wie gesagt, nach dem WE probier ich eine Lösung zu finden.
johny7 11.06.2011
Also, die eckigen Klammern bringen das ganz zum Erliegen.

Aber nachdem ich die 'alternative Syntax' angewendet habe, hat es funktioniert. Wie kommts? Wenn es doch nur eine andere Schreibweise ist?
Wenn mir das jemand erklären kann, bevor ich eine Antwort markiere...
johny7 14.06.2011
Entweder hab ich Tomaten auf den Augen oder die Ursache versteckt sich nicht in dem bereits geposteten Teil. Wenn du mir auf jsfiddle.net eine Demo zur Verfügung stellst kann ich ja mal durchgebuggen.
Floyd 14.06.2011

Stelle deine Javascript-Frage jetzt!