Javascript 修改原始元素时更新克隆元素

我是Jquery的新手，希望有一些线索能让我走上正轨：）

问题：由于

clone（）

，我有一个购物车总价显示在页面的另一个位置，我希望每次修改原始价格元素时都能自动更新这个克隆价格

jQuery("document").ready(function($){
  var $vartocopy = $('#totalpricemodule').clone(true);
  $('.column42').append($vartocopy);
});

---

在你面对问题的地方，你可以采取几种方法。然而，有一点是肯定的，JavaScript并没有提供您在这里需要的任何魔力，JQuery也没有

1.转向以数据为中心的思维（被动） 长话短说，你的问题源于这样一个事实：你没有一个单一的价格来源。这意味着您实际上显示了两个不同的价格，它们的值相同，只是因为您有意这样做。这两个价格在你的程序内存中有两个表示，这就是你所有问题的原因

在您的案例中，以数据为中心的方法——或者一些人喜欢的反应式思维——将价格存储在JS变量/对象/任何东西中（或者通常将其存储在JS程序的内存中，而不是DOM中），并且只存储在这一个位置。现在，想要显示或使用该值的任何人和任何东西都需要访问该变量/对象/任何东西

我相信很多JS开发人员的误解是JS代码不是一个真正的程序，它只是DOM上的糖衣（JQuery并没有缓解这一问题）。我认为这是错误的。应该像浏览器一样使用DOM来显示内容。因此，将数据存储在内存中，使用JS运行代码，并通过DOM显示内容

有很多图书馆可以让所有的工作都顺利进行。然而，这并非没有成本。首先，你需要学习一个新的库，第二，你还有另一个依赖，第三，这使你的网站更依赖于JS本身。不过，这是值得的。即使只是为了成为更好的程序员

我想推荐的图书馆是。不是没有理由的。Vue易于学习、轻量级、快速，不需要任何“框架”，并且具有良好的文档。当然，所有这些都是可能的，因为Vue的核心功能不如其他库丰富，但我相信它现在非常适合您的需要

使用Vue，您可以将价格保存在一个变量中，并且每当您更新该变量时，使用该变量的所有位置都将自动更新。我想这就是你想要的魔法

2.创建一个函数来更新您的值 创建一个类似于

updatePrice

的函数，它将更新所有需要更新的位置。你将如何保存这些参考资料取决于你自己。如果只有几个地方，您可以显式地更新它们。不过，这假设只有一个价格可以显示。如果有许多不同的价格，如一些产品清单，那么这只会变得更加困难。最终，您可能会重新发明轮子，并创建类似于Vue和其他此类库所提供的东西

3.解决问题而不解决问题

---

您可以随时决定只需要在一个地方显示此价格，从而消除问题本身。没有问题，没有什么要解决的。

谢谢您的详细回答

获得自动更新的克隆元素的目标似乎是“这一定很容易做到”，但你的解释让我明白了为什么不是这样

---

这里社区的反应给我留下了深刻的印象，这对像我这样的新来者来说是一种鼓舞，他们希望在我的编程技能发展后回到这里。

最初的版本是如何更新的？您需要修改逻辑以同时修改克隆。没有内置的方式链接两个对象。作为初学者，我无法回答您的问题，但我只是想知道jquery函数是否允许复制Dom节点并不断更新其中的信息，而不是仅仅克隆它并刷新页面以更新它。不幸的是，这是一个手动过程所有的修改都是在代码中完成的吗？或者这些输入也是用户可以修改的？顺便说一句，克隆一个具有ID的元素并将其原样放回html中不是一个好主意。这意味着您有两个具有相同ID的元素。这违反了原则，尽管它不会直接抛出错误。