Форум

Bravo · #1 (**permalink**) 20.05.2015, 12:29

День добрый

Есть такой код:

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?

devote · #2 (**permalink**) 20.05.2015, 12:44

нужно не .attr("value") использовыать а .val()

рони · #3 (**permalink**) 20.05.2015, 14:39

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>

Vlasenko Fedor · #4 (**permalink**) 20.05.2015, 15:07

<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>

еще пример

Bravo · #5 (**permalink**) 26.05.2015, 07:20

Сообщение от devote

нужно не .attr("value") использовыать а .val()

Думал про .val(), но не стал проверять, а зря.

Всем спасибо за ответы и оптимизацию решения

Форум

Справочник

Discord чат

Курсы javascript