jquery - 通过 ajax 加载，比较内容，动画变化

Question

我正在尝试使用 Ajax 使我们的篮子添加/删除项目。这是相当直截了当的。

我计划在每个 AJAX 请求时返回整个篮子容器。从而确保我得到了所有正确的折扣等等。

有没有一种简单的方法可以将旧篮子容器与新篮子容器进行比较，然后进行动画更改？IE。删除订单项后，与旧内容相比，新内容将缺少一个 div，然后我想动画该订单项消失。

我已经确定了动画的内容，所以我的问题更多的是比较两个容器的方法。并根据差异采取行动。

Answer 1

一种方法是在渲染篮子 div 时添加一些元数据。某种 id 来区分项目。你可能已经有了这个。像这样：

<div data-cartitem="1">Book</div>
<div data-cartitem="2">Bread</div>
<div data-cartitem="3">Soda</div>

然后当您返回 ajax-calls 响应时，我建议使用JSON数据格式，因为它很容易与 javascript/jquery 一起使用。在您的 ajax 调用完成后，只需运行一个小脚本（我在这里使用 jquery）来隐藏（或删除）不再在购物车中的购物车。这是一个示例，其中“newcart”-变量是一个包含当前 caritems 的 json-object 数组（由 ajax 返回）。然后隐藏不在这个 json-array 中的 div：

$("div").filter(function () {
    var $div = $(this);
    return $(newcart).filter(function () {                
        return (this.cartitem == $div.data("cartitem"));
    }).size() === 0;
}).fadeOut("slow");

查看小提琴中的整个示例以了解重点。

Answer 2

假设每一行的文本是唯一的，你可以用jquery text 方法比较每一行的文本。并使用$(youReceivedData).text()例如。或者，您可以获取篮子的 html() 并将其与 Ajax 查询返回的 html 进行比较。查看 jQuery 中的.each。

你可以做的是为你的东西设置动画（比如fadeOut删除的行并同时制作你的ajax，然后当动画完成时，你通过ajax请求返回的html更改html。

通常，当我在 jQuery 中添加时，我只抓取一行：例如，当有人发表评论时，我将表单发送到控制器，然后我处理添加评论，为新评论生成 html 代码并返回它。所以注释行是单个元素，html 总是相同的。