Я хочу написать код, где, когда в корзину не добавляется (0), значок светло-серый, но когда что-то добавляется в корзину, оно меняется на красный ,Изменить цвет фона, если что-то добавлено в корзину
<span class="cart-item-number">1</span>
Как изменить цвет, если тележка больше или равна 1? Я бы использовал JQuery или PHP для этого?
Я бы порекомендовал jquery изменить цвет в зависимости от значения.
span не имеет триггера change по умолчанию. Итак, когда вы что-то добавить в корзину вам нужно будет вызвать change вручную, например, так:
$('span').text(v).trigger('change');
Тогда вы можете слушать change триггер и делать то, что вы хотите:
$('span').on('change', function() {
var v = parseInt($('span').text());
if (v > 0) {
$('span').css('background', 'red');
}else{
$('span').css('background', 'gray');
}
});
Вы можете использовать input Событие:
$(document).ready(function() {
$(".cart-item-number").on("input",function(){
$value = parseFloat($(this).text());
if ($value > 0)
$(this).css({backgroundColor:"red"});
else
$(this).css({backgroundColor:"gray"});
})
})
Окончательный код:
<!DOCTYPE html>
<html>
<head>
<style>
.cart-item-number {
width: 50px;
height: 20px;
border: 2px solid #000;
display: inline-block;
background-color: red;
}
</style>
</head>
<body>
<span class="cart-item-number" contenteditable="true">1</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".cart-item-number").on("input",function(){
$value = parseFloat($(this).text());
if ($value > 0)
$(this).css({backgroundColor:"red"});
else
$(this).css({backgroundColor:"gray"});
})
})
</script>
</body>
</html>@Obama Погиб Harambe, Проверьте мой ответ! – Ehsan
Если бы я хотел, чтобы это применимо ко всем страницам, на которых я бы поставил код? –
Я использую Wordpress. –
вам нужно код для этого –