根據其位置動態設置行號

我有一個sections的列表，其中每個預製div和button動態地在下面創建新的div。 divs總是創建在它們所在的部分的末尾，並且應該在行中的位置之後進行編號，而不是創建順序。根據其位置動態設置行號

<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>

我被困在試圖動態設置每個數字。當我創建一個新的div時，它應該根據我選擇創建它的部分以及本部分已包含的div的數量加上前面部分的div數量來獲取它的編號。而不是像我一樣：

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

我寫的代碼獲得當我創造新的div從第一個到最後一個部分正確的數字，但是當我回到以前的部分，以創建一個新的，因爲它失敗不知道這些部分已有的現有div的數量。在新的排名之後定位的div的數量也應該改變，以匹配他們在排中的新位置。我試圖在JavaScript中找到正確的語法。任何想法我可能會這樣做？

感謝您的幫助

我的小提琴：https://jsfiddle.net/balleronde/8bx98a0r/

來源

2016-10-10 Nora

推測* index *是一個字符串，那麼'parseInt（index + R）'需要是'parseInt（index）+ R'，但也許它不需要。 ;-) – RobG

在JavaScript中，'parseInt（index）+ R'中的'+'將像數字1 + 1 = 11相關聯，而不是數學1 + 1 = 2.感謝您的回答:) – Nora

使用' parseInt（index + R）'保證如果任一個是一個字符串，那麼'1 + 1'將是'11'。每個值必須首先轉換爲數字，我假設* R *將被初始化爲一個數字，因此不需要轉換。 – RobG

我認爲你需要一個單獨的R參數（計數器）每個部分，如果我抓住你的真正用意。

可以說R1是最頂部的計數器，R2是第2最頂部的計數器，依此類推。

來源

2016-10-10 01:12:47 techfang

謝謝。下面是我使用你的建議的地方：https：//jsfiddle.net/balleronde/Loj0xyvk/2/我仍然不知道如何將對象的屬性添加到下一個，以便跟蹤以前的值 – Nora

嗨娜拉，哪個「以前的價值」？你可以再詳細一點嗎。謝謝。編輯：初始化R1 = 1，R2 = 2，R3 = 3，等等？ – techfang

使目前爲止總數的每個部分都附加了另一個變量。所以每次製作一個新的方形時，只需將該編號添加到totalNumber1（對於第1部分）。 – techfang

您應該從「數據」中拆分「視圖」。例如，您可能會將您的數據作爲列表或對象數組[{section: "section1", id:1},{section: "section2", id:2}]跟蹤並從該數據「構建」您的HTML。

您只需要更改數組數據（編輯，插入或刪除對象），並調用函數以從新對象列表中「重建」您的視圖。

來源

2016-10-10 01:24:04

謝謝你的回答。使用對象來存儲每個部分的div數量似乎是正確的方法，因爲它允許我動態使用單擊的按鈕的索引來瀏覽對象屬性。我仍然在努力的語法，雖然...我試圖添加對象屬性的值，每一個都是以前的總和，但我顯然做錯了。任何提示什麼是正確的語法會是什麼？對於基本問題抱歉。 – Nora

無法將全局R值分配給新節，因爲無論新節在哪裏，都將更新爲R + 1。

你應該做的是在每次點擊按鈕後嘗試找到「R」值。並更新所有部分吹新創建一個。

P.S.使用jQuery使它更容易。

來源

2016-10-10 01:32:21

根據其位置動態設置行號

回答

相關問題