javascript - 如何用jquery改变输入按钮的背景图片

Question

我有一个输入按钮，它有一个初始背景图像。当使用 jquery .css() 更改某些条件时，我试图更改其图像。似乎它将覆盖 css 文件中按钮的全局 css。我怎样才能只用 jquery 或其他任何东西改变背景属性？谢谢。

JS:

if(sum>=window.start_fee){
    $(".shopcart").removeAttr("disabled")
    $(".shopcart").css("background", 'url(/static/images/cart2.png)')
}else{
    $(".shopcart").attr("disabled","disabled")
    $(".shopcart").css("background", 'url(/static/images/cart.png)')
}

CSS:

.shopcart{
     background:url(/static/images/cart.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}

Answer 1

最好的办法是创建一个在 css 中禁用的类，这样您就可以分离逻辑的表示。样本

CSS

.shopcart{
     background:url(/static/images/cart2.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}

.shopcart.disabled{
     background:url(/static/images/cart.png) no-repeat; 
}

在 JS 中，您只需添加或删除禁用的类，示例:

JS

if(sum>=window.start_fee){
    $(".shopcart").removeClass("disabled");
}else{
    $(".shopcart").addClass("disabled");
}