Показать сообщение отдельно
  #4 (permalink)  
Старый 23.10.2015, 16:17
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<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>
Ответить с цитированием