2016-10-10 8 views
0

Ich habe eine Liste von sections mit jeweils vorgefertigten div und button, um dynamisch neue divs darunter zu erstellen. Die divs werden immer am Ende des Abschnitts erstellt, in dem sie sich befinden, und sollten nach ihrer Position in der Zeile statt ihrer Erstellungsreihenfolge nummeriert werden.dynamisch Zeilennummer abhängig von seiner Position

<section id="section1"><div class="premade">1</div></section> 
<button onclick="addRow(1)">Create new</button> 
<section id="section2"><div class="premade">2</div></section> 
<button onclick="addRow(2)">Create new</button> 

Ich stecke beim Versuch, jede Zahl dynamisch einzustellen. Wenn ich ein neues div erzeuge, sollte es seine Nummer erhalten, abhängig von dem Abschnitt, in dem ich es erstellt habe, und der Anzahl der divs, die dieser Abschnitt enthält, plus der Anzahl der divs, die die vorherigen Abschnitte haben. Und nicht, wie ich tat:

section.innerHTML += '<div class="created"> ' + parseInt(index + R) + '</div>' 
R += 1; 

Der Code, den ich bekommt schrieb die richtige Nummer, wenn ich neue divs schaffen vom ersten bis zum letzten Abschnitt, aber es funktioniert nicht, wenn ich in einem früheren Abschnitt zurück eine neue, wie es zu erstellen kennt nicht die Anzahl der vorhandenen Divs, die die Sektionen bereits haben. Die Anzahl der divs, die nach dem neuen positioniert sind, sollte ebenfalls geändert werden, um der neuen Position in der Zeile zu entsprechen. Ich stehe fest, versucht, die richtige Syntax in Javascript zu finden. Irgendeine Idee, wie ich das machen könnte?

Danke für Ihre Hilfe

Meine Geige: https://jsfiddle.net/balleronde/8bx98a0r/

+0

Angenommen, * index * ist ein String, dann müsste 'parseInt (index + R) '' parseInt (index) + R' sein, aber vielleicht wird es trotzdem nicht benötigt. ;-) – RobG

+0

In Javascript würde das '+' in 'parseInt (index) + R' die Zahlen wie 1 + 1 = 11 assoziieren, anstatt Mathe 1 + 1 = 2.Danke für deine Antwort :) – Nora

+0

Verwendung ' parseInt (index + R) 'garantiert, dass, wenn eine Zeichenkette ist,' 1 + 1' '11' ist. Jeder Wert muss zuerst in eine Zahl umgewandelt werden, ich nahm an, dass * R * auf eine Zahl initialisiert werden würde und daher keine Konvertierung benötigt. – RobG

Antwort

0

Ich denke, eine separate R Variable benötigen (Zähler) für jeden Abschnitt, wenn ich begriffen, was Sie wirklich bedeutete.

sagen wir, R1 ist der Zähler für den obersten Abschnitt, R2 ist der Zähler für den zweitobersten Abschnitt, und so weiter.

+0

Danke. Hier ist, wo ich Ihren Vorschlag verwendet: https: //jsfiddle.net/balleronde/Loj0xyvk/2/ Ich kann immer noch nicht herausfinden, wie Sie die Eigenschaften des Objekts zu den nächsten hinzufügen, so dass sie die vorherigen verfolgen Werte – Nora

+0

Hallo Nora, welche "früheren Werte"? Könntest du genauer sein? Vielen Dank. edit: initialisiere R1 = 1, R2 = 2, R3 = 3, so weiter? – techfang

+0

eine weitere Variable an jeden Abschnitt für eine Gesamtzahl bisher angebracht. Jedes Mal, wenn Sie ein neues Quadrat erstellen, fügen Sie einfach die zusätzliche Zahl zur Gesamtanzahl1 hinzu (für Abschnitt 1). – techfang

0

Sie sollten "Ansichten" von "Daten" trennen.

Zum Beispiel könnten Sie Ihre Daten als eine Liste oder ein Array von Objekten [{section: "section1", id:1},{section: "section2", id:2}] verfolgen und "bauen" Sie Ihren HTML-Code aus diesen Daten.

Dann müssten Sie nur die Array-Daten ändern (ein Objekt bearbeiten, einfügen oder löschen) und eine Funktion aufrufen, um Ihre Ansicht aus der neuen Objektliste "neu aufzubauen".

+0

Vielen Dank für Ihre Antwort. Die Verwendung eines Objekts zum Speichern der Anzahl von Divs für jeden Abschnitt scheint der richtige Weg zu sein, da es mir ermöglicht, dynamisch den Index der angeklickten Schaltfläche zu verwenden, um die Objekteigenschaften zu durchsuchen. Ich kämpfe immer noch mit der Syntax ... Ich habe versucht, die Werte der Objekteigenschaften hinzuzufügen, wobei jeder die Summe der vorherigen ist, aber ich mache es offensichtlich falsch. Irgendwelche Hinweise darauf, was die richtige Syntax wäre? Entschuldigung für die grundlegende Frage. – Nora

0

Sie können einen globalen R-Wert nicht für neue Abschnitte verwenden, da dieser auf R + 1 aktualisiert wird, unabhängig davon, wo sich der neue Abschnitt befindet.

Sie sollten versuchen, den "R" -Wert nach jedem Klick auf die Schaltfläche zu finden. und update alle Sektionen blasen die neu erstellten.

P.S. Verwenden Sie jQuery, um es einfacher zu machen.

Verwandte Themen