SimpleCart JS根据数量改变购物车的颜色

时间:2013-07-11 04:48:13

标签: jquery css if-statement simplecart

我在尝试使用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()效果时,添加功能会继续工作,但隐藏,淡入淡出或添加颜色效果不起作用。

  2. SimpleCart只提供一个名为'beforeRemove'的事件,但我真正需要的是某种功能'afterRemove'事件,它识别数量何时达到0并相应地改变购物车的颜色。

  3. 任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:0)

您可以绑定到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;
});