Wie behandeln Sie HTML-Element-IDs und JavaScript-Referenzen beim Hinzufügen von Werbebuchungen mithilfe von JavaScript?

Question

Zunächst las ich alle vorgeschlagenen Fragen, die halbwegs relevant klangen und nichts gefunden hatten, was mein Problem ansprach. Zweitens, wenn dies bereits irgendwo angesprochen wird, habe ich nicht gut genug dafür gesucht. Abschließend noch zu dem Problem. : D

Ich habe eine Seite, die eine "Werbebuchung" hat. Eine "Werbebuchung" für unsere Zwecke besteht einfach aus einer Reihe von HTML-Elementen in einer horizontalen Zeile, die eine Zeile mit HTML-Eingaben bilden (z. B. Spalten wie Teile, Beschreibung, Gewicht, Einheitsrate, Gesamtrate). Eines der HTML-Steuerelemente in unserer Werbebuchung ist ein benutzerdefiniertes Serversteuerelement, das Javascript ausgibt. Unter anderem auf die Javascript Nachrichten ein Objekt vom Typ X wie folgt:

var whatever = new X(constructor values);

Jetzt kann der Benutzer Positionen mit einer Schaltfläche Hinzufügen hinzufügen. Derzeit klicke ich einfach eine saubere Kopie des HTML-Codes, der die Werbebuchung bildet. Dies klont auch den Javascript-Code, so dass jetzt jede Werbebuchung die var whatever = new X(constructor values); hat. Dies stellt ein Problem dahingehend dar, dass es mehrere Zeilen gibt, die alle auf dieselbe Javascript-Variable verweisen (nämlich whatever).

Dies ruiniert natürlich alles b/c Ich muss jedes der whatever als separate Instanzen verweisen, nicht die gleiche Instanz. Ich frage mich, ob es Ansätze gibt, mit dieser Situation umzugehen. Wie verwende ich das benutzerdefinierte Serversteuerelement, aber referenziere weiterhin das von jeder Zeile ausgegebene Javascript? Oder wie erstelle ich eine neue Werbebuchung so, dass dieses Problem vermieden wird?

Ich bin neu in der gesamten Modify-the-DOM-Verwendung-Javascript-Arena, und ich kann nicht finden, Best Practices oder Beispiele, die hilfreich sind, so dass ich ein bisschen Verlust bin.

Macht das alles Sinn? Wenn nicht, lassen Sie mich bitte wissen, was nicht und ich werde versuchen, es so gut wie möglich zu klären.

EDIT: Hier ist ein kleines Codebeispiel. Ich konnte nicht nur

var example = new SmartDropDown('uomSDD','75','1','7','','','','',2);

Der erste Parameter ist die HTML-ID eines der Elemente, die wegen diesem Grund macht und:

Das ist genau das, was die Objektdeklaration JavaScript aussieht benutze ein Array (wie in einer der Antworten erwähnt; tolle Antwort, bis ich merkte, dass ich vergessen hatte, dieses Detail zu erwähnen). Ich müsste einen Weg finden, um die ID und das Array zu verwenden.

Einige der Methoden für das SmartDropDown-Objekt sind ShowOptions, HideOptions, BindOptions.

Wie für den Code, der aufgerufen wird, wenn die Schaltfläche geklickt wird, hier ist sie:

function AddLineItem() 
{ 
    var lineItemsParent = $("lineItems"); 
    var newRow = lineItemTemplateNode.cloneNode(true); 
    lineItemsParent.appendChild(newRow); 
} 

also zusammenfassen, die Position HTML enthält die üblichen Sachen: Eingänge, wählt Spannweiten, usw. und dann die oben angegebene JS-Deklaration. Und aufgrund der Art, wie ich eine neue Werbebuchung hinzufüge (mit dem obigen Code), wird auch die JS-Variable geklont. Und ich brauche einen Weg, 1) die ID des Elements zu ändern und 2) alle JS-Referenzen zu verfolgen (ein Array hat dies bereits vorgeschlagen).

Answer 1

Verwenden Sie ein Array?

var lineItems = []; 
    ... 
    // when the button is clicked 
    lineItems[lineItems.length] = new X(constructor values); 

Wenn Sie eine neue ID zur gleichen Zeit zu erzeugen, dann können Sie einen String in dem Array-Index voranstellen.

var lineItems = []; 
    ... 
    // when the button is clicked 
    var id = 'item_' + lineItems.length.toString() 
    lineItems[lineItems.length] = new X(id, ...); 

Answer 2

Ich denke, ich brauche ein bisschen mehr Informationen, um Ihnen eine gute Antwort zu geben. Könnten Sie einen Beispielcode zeigen, wie diese Funktion von Ihnen aufgerufen wird, was var was auch immer und andere Informationen, die Sie wollen/vergeben können. Je mehr desto besser!

Ich werde gerne helfen, wenn ich kann.

Answer 3

Hier sind JavaScript-Frameworks wirklich praktisch. Viele haben gute Konstrukteure, die diese Art von Dingen einfach machen. Zum Beispiel mit Prototype, kann ich dies tun:

function buildMe(counter) { 
    var tempHTML = new Element('div',{'id':'bleh'+counter,className:'product'}) 
    tempHTML.insert(new Element('a',{className:'prodTitleLinkA',href:'/here'}) 

    $('someDiv').insert(tempHTML) 
    Event.observe('bleh'+count, 'click', function(event) { 
     alert(element.id) 
    }); 
} 

Dies schafft ein paar Elemente und verbindet ein Ereignis zu ihnen. Ich kann so viel wie ich will in "someDiv" schieben, jeder mit seinem eigenen ID und Event.