SimpleCart JS随数量改变手推车颜色

Question

我很难使用simpleCart JS事件来产生一种根据数量改变购物车颜色的效果。

本质上，我试图实现这样的功能：http://shop.hotelcostes.com/en/music/26-hotel-costes-1.html

通过使用simpleCart js：http://simplecartjs.org/documentation

到目前为止，我有两个脚本，但并不理想。

simpleCart.bind( "afterAdd" , function( item ){
    if(simpleCart.quantity() > 0){
        simpleCart.$("#cart").attr( "style" , "color:red" );
}
});


simpleCart.bind( "ready" , function( item ){
    if(simpleCart.quantity() > 0){
        simpleCart.$("#cart").attr( "style" , "color:red" );
}
});

问题：

1. 带有'afterAdd‘函数的脚本通常会更改购物车的颜色，但是当我添加.hide()和.fadeIn()效果时，add函数继续工作，但是隐藏、fadeIn或add颜色效果不起作用。
2. SimpleCart只提供了一个名为'beforeRemove‘的事件，但是我真正需要的是某种函数'afterRemove’事件，它可以识别数量达到0时并相应地改变购物车的颜色。

任何帮助都将不胜感激。谢谢。

Answer 1

您可以绑定到afterAdd并使用simpleCart.quantity()获取数量。这里有一个片段

//assuming you div that displays cartinfo has a class "cartInfo"
simpleCart.bind( "afterAdd" , function( item ){
   if(simpleCart.quantity() == 2){
     simpleCart.$(".cart").attr( "style" , "color:red" );
   }else{
     simpleCart.$(".cart").attr( "style" , "color:balck" );
   }
});
simpleCart.bind( "beforeRemove" , function( item ){ 
   if(simpleCart.quantity() > 0 && simpleCart.quantity()-1 == 0){ 
        simpleCart.$("#cart").attr( "style" , "color:black" );   
   }
   return true;
});