Изменение цвета в зависимости от value
Доброго дня!
Помогите реализовать идею: если value у input больше 0, то class=product принимает значение color:red, если равен 0 - color:black <tr class="product"> <td> <span //при клике уменьшает input на 1//>-</span> <input type="text" value="0" //value изменяется// > <span //при клике увеличивает input на 1//>+</span> </td> </tr> |
Low_Weaper,
так
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
<body>
<table>
<tr class="product">
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
<div class="product">Продакт</div>
</table>
<script>
var down = document.getElementById('down');
var up= document.getElementById('up');
var counter= document.getElementById('counter');
var product = document.getElementsByClassName('product')[0];
down.addEventListener('click', function (event) {
counter.value = counter.value - 1 ;
if( counter.value == 0) product.style.color = 'black';
if( counter.value < 0) product.style.color = 'green';
if( counter.value > 0) product.style.color = 'red';
});
up.addEventListener('click', function (event) {
counter.value = +counter.value + 1 ;
if( counter.value == 0) product.style.color = 'black';
if( counter.value < 0) product.style.color = 'green';
if( counter.value > 0) product.style.color = 'red';
})
</script>
</body>
</html>
|
Цитата:
Почти, нужно чтобы именно tr class=product менялся |
Low_Weaper,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
<style>
.product {
color: red;
}
</style>
</head>
<body>
<table>
<tr class="product">
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
</table>
<script>
var down = document.getElementById('down');
var up= document.getElementById('up');
var counter= document.getElementById('counter');
var product = document.getElementsByClassName('product')[0];
down.addEventListener('click', function (event) {
counter.value = counter.value - 1 ;
if(counter.value == 0) product.classList.toggle('product');
});
up.addEventListener('click', function (event) {
counter.value = +counter.value + 1 ;
if(counter.value == 1) product.classList.toggle('product');
})
</script>
</body>
</html>
|
Mess4me, воо то что надо, как только цвета местами поменять, чтобы было при 0 черным, а при >0 красным?
|
Low_Weaper,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>-->
<script src="jquery.js"></script>
<title></title>
<style>
.product {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
</table>
<script>
// о при 0 черным, а при >0 красным
$('tr').on('click','#down, #up', function (event) {
var input = this.parentNode.getElementsByTagName('input')[0];
if(this.id == 'down'){
input.value-=1 ;
};
if(this.id == 'up'){
input.value = +input.value + 1 ;
};
input.value > 0?$(this).closest('tr').addClass('product'):$(this).closest('tr').removeClass('product');
})
</script>
</body>
</html>
|
Цитата:
|
Mess4me, можно намного проще написать:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
<style>
.product {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<span id="down">-</span>
<input type="text" value="0" label="name" id="counter">
<span id="up">+</span>
</td>
</tr>
</table>
<script>
$('tr').on('click', '#down, #up', function() {
var input = this.parentNode.getElementsByTagName('input')[0];
input.value = +input.value + (this.id == 'down' ? -1 : 1);
$(this).closest('tr').toggleClass('product', input.value > 0);
})
</script>
</body>
</html>
|
Ruslan_xDD,
взял на вооружение ;) |
| Часовой пояс GMT +3, время: 16:55. |