Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2015, 12:29
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

Изменение значения в 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?
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2015, 12:44
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

нужно не .attr("value") использовыать а .val()
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 20.05.2015, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2015, 15:07
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

еще пример
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2015, 07:20
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

Сообщение от devote Посмотреть сообщение
нужно не .attr("value") использовыать а .val()
Думал про .val(), но не стал проверять, а зря.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета шрифта выбранного значения select AlexG88 Элементы интерфейса 15 16.03.2015 10:33
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Динамическое изменение значений диаграммы в зависимости от значения ползунков Volchen0ck Events/DOM/Window 8 23.04.2014 13:15
Изменение значения массива елементов ur5fdg Элементы интерфейса 4 21.10.2013 09:10
изменение картинок в зависимости от значения input jump91 Общие вопросы Javascript 2 30.01.2012 09:57