如何使用jQuery更改输入按钮的背景图像

Question

我输入了一个具有初始背景图像的按钮。 当某些条件通过jquery .css（）更改时，我尝试更改其图像。 似乎它将覆盖css文件中按钮的全局css。 如何仅使用jquery或其他方法更改background属性？ 谢谢。

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");
}

Answer 2

可以使用addClass和removeClass属性代替Remove attr。

$(document).ready(function(){
if(sum>=window.start_fee){
    $("input[type=submit]").removeClass("submitbtn");
    $("input[type=submit]").addClass("submitbtnnew");   
}
else{
    $("input[type=submit]").addClass("submitbtn");
    $("input[type=submit]").removeClass("submitbtnnew");

}

});
</script>

将您的背景图片应用于该课程

<style>
.submitbtn{
    background:#000;
}
.submitbtnnew{
    background:#03C;
}
</style>