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

Question

我是Jquery的新手，并且会有一些线索让我走上正轨：）

问题：我的购物车总价格显示在页面的另一个地方，感谢clone()，我希望每次修改原始价格元素时，都会将此克隆价格自动更新。< / p>

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

Answer 1

您可以从面临问题的地方采取几种方法。但是，有一点可以肯定，JavaScript并没有提供你需要的任何魔法和JQuery。

1。转向以数据为中心的思考（被动）

长话短说，你的问题源于你没有单一的事实来源（wiki）的价格。这意味着您实际上只显示两个具有相同价值的价格，因为您的意思是它们。这2个价格在你的程序中有2个表示，这个事实是导致你遇到的所有问题的原因。

在您的情况下以数据为中心的方法 - 或者像某些人更喜欢的反应性思维 - 会将您的价格存储在JS变量/对象/任何内容中（或者通常将其存储在JS程序的内存中而不是DOM中）并且仅在这一个地方。现在，无论谁想要显示或使用该值，都需要访问该变量/对象/其他任何内容。

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

有许多图书馆可以让所有图书馆实际工作没有太大困难。但是，这不是没有成本的。首先，你需要学习一个新的库，其次你有另一个依赖项，第三，这使你的网站更依赖于JS本身。虽然，这是值得的。即使只是为了成为更好的程序员。

我想推荐的图书馆是Vue。不无道理。 Vue易于学习，轻巧，快速，不会对您施加任何“框架”并且具有良好的文档。当然所有这一切都是可能的，因为Vue的核心并不像其他库那样功能丰富，但我相信它现在非常适合您的需求。

使用Vue，您可以将价格保存在一个变量中，每当您更新该变量时，所有使用它的地方都会自动更新。我认为这是你想要的魔力。

2。创建一个更新值的函数

创建像updatePrice这样的函数，它将更新所有需要更新的地方。您将如何保留参考资料取决于您。如果只有几个地方，您可以明确更新它们。但是，假设只显示一个价格。如果有许多不同的价格，即某些产品列表，那么这只会变得更难。最后，您最终可能会重新发明轮子，并创建类似于Vue和其他此类库所提供的内容。

3。消除问题而不解决问题

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

Answer 2

感谢您的详细解答。

获得自动更新的克隆元素的目标似乎是＆＃34;它必须是容易做的事情＆＃34;但是你的解释让我明白了为什么不这样做。

我对社区的反应能力印象深刻，对于像我这样的新人来说，当我的编程技能发展时，希望能回到这里，这是令人鼓舞的。