Question

我有一个简单的jQuery脚本，允许用户将产品添加到购物篮并查看动画。 http://jsfiddle.net/Z6ave/7/

现在，我有一个小问题，似乎无法找到合理的解决方案。

正如您在代码中看到的，当您将产品添加到购物篮时，将分配订单属性：

Product that was added 1st - Order 1
Product that was added 2nd - Order 2
Product that was added 3rd - Order 3
Product that was added 4th - Order 4
Product that was added 5th - Order 5
Product that was added 6th - Order 6

依旧...... 没关系，每个职位都附有一定的CSS规则。

但是，如果我删除了中间的某个产品或者不是最后一个产品的任何其他产品，并且当我在此之后添加另一个产品时，我需要它来填补空白的地方。

现在发生的事情是...... 如果我从上面的列表中删除产品编号3，然后再添加另一个产品，则列表将如下所示：

Product that was added 1st - Order 1
Product that was added 2nd - Order 2
Product that was added 4th - Order 4
Product that was added 5th - Order 5
Product that was added 6th - Order 6
Product that was added 7th - Order 7

你看到问题是3号的空白区域，所以7实际应该低于3。

你可以帮我这个吗？我知道必须有一些简单/优雅的解决方案。

谢谢

Answer 1

我之前添加了评论。这是通过数组执行此操作的示例：http://jsfiddle.net/Z6ave/8/

我创建了一个数组var removedArray = [];

然后当你删除一个项目时，它会添加到数组中：

$(".del").live("click", function() {
var removed = $(this).parent().attr("order");
removedArray.push(removed);
$(this).parent().remove(); });

并在创建元素时使用它

if(removedArray.length > 0){

  var deletedNumber = removedArray[0];

  inbasketimage.addClass("slot" + deletedNumber);
  inbasketimage.attr("order", deletedNumber);
  inbasketimage.find("img").attr("src", img.attr("src"));
  inbasketimage.attr("product_name", productName);

  removedArray.shift();

}else{

  if(isNaN(order)) {
    order = 1;
  } else {
    order = order + 1;
  }

  inbasketimage.addClass("slot" + order);
  inbasketimage.attr("order", order);
  inbasketimage.find("img").attr("src", img.attr("src"));
  inbasketimage.attr("product_name", productName);
}

分配已删除产品的索引

1 个答案: