需要更新数组中的值但保留原始值以再次更新它答案

【问题标题】：Need to update values in an array but keep the original values to update it again需要更新数组中的值但保留原始值以再次更新它
【发布时间】：2012-03-06 15:27:08
【问题描述】：

我想更新食谱以更改每种成分的数量。当我输入第一个值时一切正常，但之后，它会根据更新的值而不是原始值进行更新。我尝试设置第二个数组来保存原始值，然后交换它们，但它没有用。这是脚本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/>

【问题讨论】：

你能在这里发布适当的代码吗？如果以后有人来看这篇文章，而你的 jsfiddle 已经消失了，那么问题和答案将无法遵循。
当然，我可以发布它，但正确答案也是指向另一个 jsfiddle 的链接。

标签： javascript html arrays

【解决方案1】：

您的解决方案的问题是您的数组包含页面中的对对象的引用：

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/

【讨论】：

效果很好，我现在知道它是如何工作的了。非常感谢。
嘿，我知道这是一个单独的问题，但知道为什么这不能正确返回 jsfiddle.net/a8YTa/8 吗？它不应该显示整数的小数点，但只有在输入小于 10 时才有效。
@AdeptOfHermes：因为模数没有返回 0。要看到这一点，请提醒 defaultValues[i] % divider 的结果。这是因为 javascript 使用浮点数，而不是十进制数。有一些方法可以解决这个问题，试试看吧;)
请在您的答案中添加代码的 sn-ps 以表明您的意思。如果 Q & A jsfiddles 有时会消失，这将是无用的。
是的，我注意到它也没有返回 0，所以我最终这样做了： if ((num - Math.floor(num)) <.01 numingred math.floor else num.tofixed>

【解决方案2】：

您正在根据最后一个数组计算您的成分，因此您的食谱很快就会变成一团浆糊。 :)

您需要创建一个包含原始成分并保持不变的数组，然后在将值（服务量）输入文本框时从该数组计算新值。

希望这会有所帮助。

【讨论】：

我知道我没有在这个版本的小提琴中展示这一点，但我确实尝试过这样做，但没有成功。事实上，我在问题中提到了这一点。如果你能说明如何正确地做到这一点，那将不胜感激。编辑：这是我尝试做的，但没有成功：jsfiddle.net/a8YTa/5

【解决方案3】：

回复。您在上面的评论： origingred 与 numingred 相同。它是一个包含相同（实时） span.ingred 元素的（实时）节点列表。更改它们的 numingred 更改也源自 origingred。

你需要的是一个真正的静态数据源。

您可以将您的成分存储在一个真正的数组中，如下所示：

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;

【讨论】：