时间戳

首页 > 解决方案 > 使用相同数据更新 UI 多个部分的 jquery 策略

javascript - 使用相同数据更新 UI 多个部分的 jquery 策略

问题描述

我有一个使用 jquery 3.2.1 的 Web 应用程序

在页面加载时，PHP 脚本正在渲染 UI 的标记。这包含一个类别列表，然后是相关数据表。

举个例子：

<!-- Category list -->
<ol>
    <li>Foo (3)</li>
    <li>Bar (19)</li>
    <li>Baz (2)</li>
</ol>

然后是与这些类别相关的各种表格：

<p>Foo: 3 records</p>
<table id="fooTable">...</table>

<p>Bar: 19 records</p>
<table id="barTable">...</table>

<p>Baz: 2 records</p>
<table id="bazTable">...</table>

上面的标记是在页面加载时通过 PHP 生成的。此时尚未使用任何 JavaScript。

然后通过 ajax 调用更新表 - 使用 jquery。我可以获得在我的 ajax 响应中返回的记录总数。

但这让我开始思考如何最好地更新通过 jquery 引用这些数字的部分 UI。

我对此的“解决方案”是将适当的数字包装在一个已知的类中。然后在 ajax 响应中，定位这个类并更新相应的数据。例如，如果我们考虑“Foo”类别，则已知类 ( .foo-count) 已包裹在我要更新的数字周围：

<!-- Category list -->
<ol>
    <li>Foo (<span class="foo-count">3</span>)
    <!-- ... -->
</ol>

<p>Foo: <span class="foo-count">3</span> records
<table id="fooTable">...</table>

因此，在我的 ajax.done()回调中，我可以执行以下操作：

$('.foo-count').empty(); // Clear out the existing number (3 in this case)
var foo_count = ... // Variable to hold response data giving updated count.
$('.foo-count').html(foo_count);

这似乎很复杂，尤其是在多个类别中。

这类问题有更好的解决方案吗？

标签： javascriptjqueryhtml

解决方案

推荐阅读