Question

我正在尝试使用Ajax添加/删除项目。这很简单。

我打算在每个AJAX请求上返回整个篮子容器。因此，确保我有所有正确的折扣等等。

有没有一种简单的方法可以比较旧的篮子容器和新的容器，然后动画更改？ IE浏览器。删除订单项后，新内容将丢失与旧版相比较的div，然后我想让该订单项动画消失。

我把动画的东西钉了，所以我的问题更多的是比较2个容器的方法。并根据差异采取行动。

Answer 1

假设每行的文字都是唯一的，您可以将每行的文字与jquery text method.进行比较，并使用$(youReceivedData).text()。或者你可以得到你的篮子的html（）并将它与你的Ajax查询返回的html进行比较。在jQuery中查看.each。

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

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

Answer 2

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

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

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

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

查看fiddle中的整个示例以获得重点。

通过ajax加载，比较内容，动画更改

2 个答案: