需要更新數組中的值，但保持原始值再次更新

我想更新配方以更改每種配料的量。當我放入第一個值時，一切正常，但在此之後，它會根據更新的值更新而不是原始值。我嘗試設置第二個數組來保存原始值，然後交換它們，但它不起作用。這是一個http://jsfiddle.net/a8YTa/3/劇本的現場版本。我希望看到jsfiddle讓我的問題清楚。需要更新數組中的值，但保持原始值再次更新

編輯：這是我試圖建立第二陣列與原始值的版本，並沒有工作http://jsfiddle.net/a8YTa/5/

編輯：這裏是要求有問題的代碼：

var numIngred = document.getElementsByClassName('ingred'); 
    var initServ = document.getElementsByClassName('servnumber')[0].innerHTML; 

    var newServ = document.getElementById('newserv'); 

    var divider = 0; 
    function changeServ(){ 
    divider = initServ/newServ.value; 
    var i=0; 
    for(i=0; i<numIngred.length; i++){ 
     numIngred[i].innerHTML = numIngred[i].innerHTML/divider; 
    } 

    } 

    newServ.oninput = changeServ;

HTML裏面有原值：

Serves: <span class="servnumber">8</span><br/><br/> 
How many would you like to serve?:<input id="newserv" /> 
<br/><br/> 
<span class="ingred">1</span> Apple <br/> 
<span class="ingred">3</span> Peaches <br/> 
<span class="ingred">.5</span> Pineapples <br/> 
<span class="ingred">2</span>lbs nuts <br/> 
<span class="ingred">6</span> small peppers <br/>

來源

2012-03-06 kugyousha

你能在這裏發佈適當的代碼嗎？如果有人在將來閱讀本文，並且您的jsfiddle已經消失，那麼問題和答案將無法遵循。 – 2012-03-06 16:06:10

當然，我可以發佈它，但正確的答案也是另一個jsfiddle的鏈接。 – kugyousha 2012-03-06 16:31:43

與您的解決方案的問題是，你的陣列由引用的頁面對象：

var numIngred = document.getElementsByClassName('ingred'); //array of HTML elements

所以，當你做numIngred[index].innerHTML，它訪問屬性的當前值。

爲了解決這個問題，你只需要創建一個新的數組存儲的innerHTML，而不是一個參考對象的實際值：

var defaultValues = []; for(var i = 0; i < numIngred.length; i++) { defaultValues[i] = numIngred[i].innerHTML; }

這裏是小提琴： http://jsfiddle.net/a8YTa/7/

來源

2012-03-06 15:53:25 Andre

，完美的工作，我看到它是如何工作的吧。非常感謝你。 – kugyousha 2012-03-06 16:04:14

嘿，我知道這是一個單獨的問題，但任何想法，爲什麼這是不正確返回http://jsfiddle.net/a8YTa/8/？它不應該表現出小數點整數，但只有當輸入的是10歲以下 – kugyousha 2012-03-06 16:30:31

@AdeptOfHermes工作原理：由於模量沒有返回0。要看到這一點，提醒'defaultValues [I]％divider'的結果。這是因爲JavaScript使用浮點數而不是十進制數。有一些解決方法，嘗試使用它;） – Andre 2012-03-06 16:45:12

您從最後一個數組計算你的成分，因此你的食譜很快將成爲一個大的玉米粥。 :)

您需要創建一個數組，其中包含原始成分並保持不變，然後在輸入值（要服務的金額）輸入到文本框中時，從該數組計算新值。

希望這會有所幫助。

來源

2012-03-06 15:37:59

我知道我沒有在這個版本的小提琴中表現出來，但我確實試圖做到這一點，並沒有奏效。其實我在這個問題中提到過。如果你能說明如何正確地做到這一點，將不勝感激。編輯：我該如何試圖做到這一點，它不工作：http://jsfiddle.net/a8YTa/5/ – kugyousha 2012-03-06 15:46:57

Re。您的評論如上： originingred與numingred相同。它是包含相同（實時）span.ingred元素的（活動）節點列表。改變它們也可能引起更改。

你需要的是一個真正的靜態數據源。

你既可以儲存您選擇成分中真正的數組，像這樣：

http://jsfiddle.net/EmWeG/

或使用額外的屬性在你的標記：

<span class="ingred" data-orig="1">1</span>

然後立足於你的計算

parseFloat(numIngred[i].getAttribute('data-orig')) 
// i.e. numIngred[i].innerHTML = <the above>/divider;

來源

2012-03-06 16:03:45 Flo

需要更新數組中的值，但保持原始值再次更新

回答

相關問題