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

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>

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

2 个答案: