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

时间:2017-09-11 10:35:43

标签: javascript jquery clone

我是Jquery的新手,并且会有一些线索让我走上正轨:)

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

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

2 个答案:

答案 0 :(得分:0)

您可以从面临问题的地方采取几种方法。但是,有一点可以肯定,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。消除问题而不解决问题

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

答案 1 :(得分:0)

感谢您的详细解答。

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

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