2014-11-21 4 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

+0

Надеюсь, это было бы полезно [нажмите здесь] (http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property) –

ответ

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

Вместо Удалить атр вы можете использовать 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> 
Смежные вопросы