24.11.2015, 12:36
|
|
Интересующийся
|
|
Регистрация: 14.12.2014
Сообщений: 15
|
|
|
Изменение цвета в зависимости от 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>
|
|
24.11.2015, 13:22
|
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
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>
|
|
24.11.2015, 13:35
|
|
Интересующийся
|
|
Регистрация: 14.12.2014
Сообщений: 15
|
|
Сообщение от Mess4me
|
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 менялся
|
|
24.11.2015, 14:07
|
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
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, 24.11.2015 в 14:12.
|
|
24.11.2015, 14:53
|
|
Интересующийся
|
|
Регистрация: 14.12.2014
Сообщений: 15
|
|
|
Mess4me, воо то что надо, как только цвета местами поменять, чтобы было при 0 черным, а при >0 красным?
|
|
24.11.2015, 16:54
|
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
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>
|
|
24.11.2015, 21:55
|
|
Интересующийся
|
|
Регистрация: 14.12.2014
Сообщений: 15
|
|
|
Сообщение от Mess4me
|
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>
|
Ооо, то что надо спасибо |
|
24.11.2015, 23:47
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
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_mart, 24.11.2015 в 23:50.
|
|
25.11.2015, 01:21
|
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
Ruslan_xDD,
взял на вооружение 
|
|
|
|
