Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Функция для изменения значения input-a (https://javascript.ru/forum/jquery/59038-funkciya-dlya-izmeneniya-znacheniya-input.html)

goooooch 23.10.2015 15:12
Функция для изменения значения input-a
 
Всем привет.
В нескольких местах страницы есть html:
<div class="input-count">
    <input type="text" name="quantity" value="1.8" />             
   <div class="plus-minus">              
                  <div class="up">
                    <i class="fa fa-caret-up"></i>
                  </div>
                  <div class="down">
                    <i class="fa fa-caret-down"></i>
                  </div>             
   </div>  
</div>


Задача:
написать функцию, которая по клику на i соответственно уменьшала/увеличивала value у input-a на 0,1.

Задайте, пожалуйста, направление движения. Какие функции и алгоритм подойдут для этой цели?

ksa 23.10.2015 15:19
Цитата:
Сообщение от goooooch
Задайте, пожалуйста, направление движения.
Нужно использовать особенности ДОМ-структуры... ;)

goooooch 23.10.2015 15:54
Цитата:
Сообщение от ksa (Сообщение 392931)
Нужно использовать особенности ДОМ-структуры... ;)
Зачем пишете это? Пройдите мимо со своими "остроумными" сообщениями.

Decode 23.10.2015 16:17 
<style>
	i {
		width: 20px;
		height: 20px;
		border: 2px solid #ccc;
		display: inline-block;
		text-align: center;
	}

	.fa-caret-up:before {
		content: '+'
	}

	.fa-caret-down:before {
		content: '-'
	}
</style>

<div class="input-count">
	<input type="text" name="quantity" value="1.8" />             
	<div class="plus-minus">              
		<div class="up">
			<i class="fa fa-caret-up"></i>
		</div>
		<div class="down">
			<i class="fa fa-caret-down"></i>
		</div>             
	</div>  
</div>

<script>
	document.onclick = function(e) {
	  if ( !e.target.classList.contains('fa') ) return;

	  var inpElem = e.target.closest('.input-count').querySelector('input[type=text]'),
	      val = +inpElem.value;

	  e.target.classList.contains('fa-caret-up') && (val += 0.1);
	  e.target.classList.contains('fa-caret-down') && (val -= 0.1);

	  inpElem.value = val.toFixed(1);
	};
</script>

goooooch 23.10.2015 16:23
Спасибо. Код задачу решает. Но хотелось бы именно направление решения данной задачи на Jquery. Какие функции, атрибуты и алгоритм подойдут для этой цели?

Decode 23.10.2015 16:38
Цитата:
Сообщение от goooooch
Но хотелось бы именно направление решения данной задачи на Jquery
 
$('.input-count').on('click', '.fa', function(e) {
      var inpElem = $(this).closest('.input-count').find('input[type=text]'),
          val = +inpElem.val();
      
      $(this).hasClass('fa-caret-up') && (val += 0.1);
      $(this).hasClass('fa-caret-down') && (val -= 0.1);
      
      inpElem.val( val.toFixed(1) );
});


Часовой пояс GMT +3, время: 14:43.