Изменение значения в input[text]
День добрый :)
Есть такой код:
jQuery(function($){
$(".number-item a").bind("click", function(){
var This = $(this),
inputNumber = +This.siblings("input").attr("value"),
inputNumberClass = This.attr("class");
if(inputNumberClass == "plus-number-item" && inputNumber >= 0){
This.siblings("input").attr("value", inputNumber + 1);
return false
} else if(inputNumberClass == "minus-number-item" && inputNumber <= 1){
return false
} else{
This.siblings("input").attr("value", inputNumber - 1);
return false
}
});
});
И есть: <a href="#" class="minus-number-item">-</a> <input type="text" value="1" /> <a href="#" class="plus-number-item">+</a> Код работает для value="1", если дергать + и -, но если вбить в input число, то к этому числу + и - не применяться. Что отвечает за числа напечатанные с клавиатуры в input и как это число изменять, если оно не относится к value? |
нужно не .attr("value") использовыать а .val()
|
Bravo,
может input type="number" и не мучатся?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.number-item a{
text-decoration: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function($) {
$(".number-item").each(function(f, c) {
$(c).on("click", "a", function(e) {
var input = $("input", c)[0],
val = +input.value;
$(this).is(".plus-number-item") ? val++ : 1 < val && val--;
input.value = val;
e.preventDefault()
})
})
});
</script>
</head>
<body>
<div class="number-item">
<a href="#" class="minus-number-item">-</a>
<input type="text" value="1" />
<a href="#" class="plus-number-item">+</a></div>
</body>
</html>
|
<style>
.podbor{position: relative;}
.podbor>input{
padding: 2px 2px 1px 4px;
font-size:30px;
width: 70px;
height: 40px;
float: left;
border: 1px solid #666;
border-radius: 4px 0 0 4px;
}
.podbor>span{
display: block;
font-size: 18px;
position:absolute;
left: 58px;
margin: 0;
padding: 2px;
line-height:14px;
width: 14px;
border: 1px solid #666;
background-color: #E4E4E4;
text-align: center;
cursor: pointer;
}
.podbor>.plus{border-bottom: none; height: 16px;}
.podbor>.minus{top: 20px; height: 14px;}
.podbor>span:hover{background-color: #999;}
</style>
<body>
<div class="podbor">
<input type="text" value="1"/>
<span class="plus">+</span>
<span class="minus">-</span>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function(a){
a('div.podbor').on('click', 'span', function () {
var inp = a('input' , this.parentNode),
val = +inp.val();
inp.val(val += this.className == 'minus' ? val>1 ? -1: 0: 1);
});
});
</script>
еще пример :) |
Цитата:
Всем спасибо за ответы и оптимизацию решения :) |
| Часовой пояс GMT +3, время: 14:14. |