Форум

Surlik · #1 (**permalink**) 04.04.2012, 01:14

Подскажите, пожалуйста, как сделать счётчик значений value в элементе формы input type=”text” при клике на изображение (стрелочки – влево, право)

<a href="#">
<img class="left" alt="" src="left.gif">
</a>
<input id="test" class="text" type="text" value="1" name="test">
<a href="#">
<img class="right" alt="" src="right.gif">
</a>

Спасибо!

T-sh · #2 (**permalink**) 04.04.2012, 01:20

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

счётчик значений value

а теперь тоже самое, только нормальными словами

пользователь ввёл цифру, и с помощью стрелочек может увеличить/уменьшить её на 1?

Surlik · #3 (**permalink**) 04.04.2012, 01:47

Сообщение от T-sh

а теперь тоже самое, только нормальными словами

пользователь ввёл цифру, и с помощью стрелочек может увеличить/уменьшить её на 1?

Да вот это я и хотел узнать как сделать!

T-sh · #4 (**permalink**) 04.04.2012, 01:48

<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
 var input = $('#inp'); // наш инпут
 var a; // тут будел лежать текущее значение
          $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
});
</script>
</head>
<body>  

<input type="text" id="inp" value ="1" />

<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
</body>
</html>

Surlik · #5 (**permalink**) 04.04.2012, 02:08

T-sh, большое спасибо!
А как сделать в вашем коде так чтобы значения не становились отрицательными!

T-sh · #6 (**permalink**) 04.04.2012, 02:13

$('.minus').click(function(){ // по клику на минус
              a = input.val();  // получить текущее значение
              a = (a<1)?1:a;  // если а < 1 (равно нулю), то сделать его единицей, иначе — оставить значение. 
              a--; // уменьшить на 1
              input.val(a); // вернуть инпуту
          });

T-sh · #7 (**permalink**) 04.04.2012, 02:17

вернее, даже так:

$('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
			  input.val(a); // вернуть инпуту
		  });

Surlik · #8 (**permalink**) 04.04.2012, 02:19

Эххх учиться и учиться

Спасибо!

Surlik · #9 (**permalink**) 04.04.2012, 04:49

У меня еще вопросик? Сейчас выводится результат (Сумма

только когда я ввожу значение c клавиатуры и нажимаю ввод, а вот по плюс/минус в режиме так сказать «реального времени» Не работает! Спасибо!

<script >
$(document).ready(function() {
form = $("#calc");
var input = $('.inp'); // наш инпут
var a; // тут будел лежать текущее значение
        $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
      //  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
$("#sum span").text("0");
form.change(function() {
  	     totalSum = 0
				$("#input").each(function() {
						var input = parseInt($("#input").val()) * parseInt($("#input").attr("name"));
						totalSum += input;
    		});	
				$("#sum span").text(totalSum);
		});
});

</script>
</head>
<body>
<form>
<div id="calc">        
<input type="text" class="inp" value ="0" id="input" name="100" />
<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
<input type="text" class="inp_tu" value ="0" id="input" name="100" />
</div>
</form>
<p id="sum">Сумма:<strong><span></span></strong> р.</p>
</body>

Форум

Справочник

Discord чат

Курсы javascript