jquery листка

198

Руслан Исмаилов

28 июня 2012, 14:37

1830

Здравствуйте.

Хочу сделать на сайте такую фишку как на скрине:

Кто может подумать что это рейтинг но это не так, это количество товаров. По логике вещей ее можно плюсовать (увеличивать количество товаров) можно минусовать (уменьшать количество товаров) в какую сторону двигать? Я видать неправильно ключевые слова подбираю в поисковиках все не то.

Как я вижу это в html:

<div id="col">

<a href="#" class="minus">-</a>

<input type="text" name="" value="" />

<a href="#" class="plus">+</a>

</div>

Буду благодарен любой помощи.

Спасибо за внимание.

293

Brand from Amber

28 июня 2012, 15:10

#1

Направление такое:

<div id="col">
<div class="minus"> - </div>
<div class="number"> 0 </div>
<div class="plus"> + </div>
</div>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".minus").click(function() { $(".number").text(parseInt($(".number").text()) + 1); });
$(".plus").click(function() { $(".number").text(parseInt($(".number").text()) - 1); });
}
</script>

Дальше оптимизируй и дотачивай сам.

1

Лучший способ понять что-то самому - объяснить это другому.

C

291

Chukcha

28 июня 2012, 15:12

#2

$.('.minus').onclick(function(){

  var inp = $(input)

  var val = ival.val();

  ival.val(val-1);

})

размножить на plus

1

71

palladin_jedi

28 июня 2012, 18:47

#3

musulman:
<input type="text" name="" value="" />

А может нативными средствами HTML5 лучше сделать?

1

Сайт о web-разработке и прочем (http://seazo.net)||Продвижение статьями под Google (http://short.seazo.net/ght4zf) Бесплатные консультации рефералам Sape (http://www.sape.ru/r.SWfwWOblBo.php) PHP и JS скрипты на заказ, создание сайтов с нуля и на CMS.

198

Руслан Исмаилов

28 июня 2012, 19:10

#4

Brand from Amber, скопировал вставил не работает, если честно неочень понял что именно нужно допиливать:) нужно ли подключать стороние скрипты?

C

291

Chukcha

28 июня 2012, 19:52

#5

Да, нужно подключить jquery

Я тут у себя неточности нашел

<div class="minus"> - </div>

<input class="num" />

<div class="plus"> + </div>

<script>

$(document).ready(function(){

$('.minus').onclick(function(){

  var inp = $('input.num');

  var val = inp.val();

  inp.val(val-1);

});

$('.plus').onclick(function(){

  var inp = $('input.num');

  var val = inp.val();

  inp.val(val+1);

});

})

</script>

1

293

Brand from Amber

28 июня 2012, 20:13

#6

http://to.lcc.ru/test/15.htm

1

IL

435

ivan-lev

29 июня 2012, 03:46

#7

Только у меня ощущение, что плюс и минус "перевёрнуты"? =)

p.s. При щелчке на минус (если речь о количестве), я ещё проверку добавляю на if(val>0) .. ;

1

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )

198

Руслан Исмаилов

29 июня 2012, 05:09

#8

Brand from Amber, а можно ли сделать так что бы в поле

<div class="number"> 0 </div>

Можно было набрать нужное количество как в поле input? Для удобства так сказать, например если нужно 10 или более что бы не кликать 10 раз на плюс.

И еще если добавить несколько таких полей блоков получается партак:)

http://artvision.kz/test/Amber/index.html

Chukcha, сделал как Вы писали все равно неработает.

http://artvision.kz/test/Chukcha/index.html

Правильное размещение ссылок на Жена+сайт о красоте*Adsens=X Бан или небан

44

Living Blues

29 июня 2012, 06:24

#9

Я бы так делал

<div id="col1">

	<div class="minus"> - </div>

		<div class="number"><input class="num" value="1"></div>

	<div class="plus"> + </div>

</div>



<div id="col2">

	<div class="minus"> - </div>

		<div class="number"><input class="num" value="1"></div>

	<div class="plus"> + </div>

</div>



<div id="col3">

	<div class="minus"> - </div>

		<div class="number"><input class="num" value="1"></div>

	<div class="plus"> + </div>

</div>


	$(".minus").click(function() {

	

		var inp = $(this).parent().find("input.num:first");

		

		if(inp.val()>1) {

		

			inp.val(parseInt(inp.val()) - 1); 

			

		}

		

	});



	$(".plus").click(function() { 

	

		var inp = $(this).parent().find("input.num:first");

	

		if(inp.val()>0) {

		

			inp.val(parseInt(inp.val()) + 1); 

			

		}

		

	});

	

	$("input.num").keyup(function () 

	{

		if($(this).val()!="")

		{

			if($(this).val()>0) { 

			

				$(this).val(Math.floor(parseInt($(this).val())));

				

			} else {

			

				$(this).val(1);		

				

			}

		}

		

	});

1

Делаю сайты на заказ, пишите ЛС

162

Mad_Man

29 июня 2012, 06:30

#10

Living Blues:
Я бы так делал

Если к странице с этим кодом имеет доступ кто-то, кроме владельца, то устойчивость нулевая. Вообще позволять юзеру обрабатывать что-либо, отвечающее за подсчёт каких-то важных данных не есть гуд.

1

Курс биткоина превысил $50 тысяч

Зачем быть уникальным в мире, где все можно скопировать