2014-11-21 101 views
1

我輸入了一個具有初始背景圖像的按鈕。我試圖改變它的形象時,一些條件改變了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; 
} 
+2

你的代碼是正確的。它不會改變任何全球CSS,只是改變你的目標特定類。如果您重新加載頁面,它將恢復到您的CSS文件中的內容。 – dave 2014-11-21 06:53:01

+0

希望這會很有用[點擊這裏](http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property) – 2014-11-21 06:58:18

回答

3

做的最好的事情是創建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"); 
} 
1

而不是刪除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>