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

问题描述：

我输入了一个具有初始背景图像的按钮。我试图改变它的形象时，一些条件改变了jQuery .css（）。它似乎会覆盖按钮的CSS文件中的全局CSS。我怎么才能改变背景属性与jQuery或其他任何东西？谢谢。如何使用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; 
}

你的代码是正确的。它不会改变任何全球CSS，只是改变你的目标特定类。如果您重新加载页面，它将恢复到您的CSS文件中的内容。 – dave 2014-11-21 06:53:01

希望这会很有用[点击这里]（http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property） – 2014-11-21 06:58:18

答

做的最好的事情是创建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你只需要添加或删除禁用类，样品：

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

答

而不是删除ATTR可以使用addClass和removeClass属性

$(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更改输入按钮的背景图像

相关推荐