Форум

romanco · #1 (**permalink**) 05.12.2010, 20:40

]Добрый день
Как то поднимал на форуме данную проблему, но до сих пор ее не закрыл.
Суть проблемы. Задачка называется "счетчик кликов". Есть "плюс" и "минус", кликаем либо одно либо другое - изменяется итоговое число. Все бы хорошо для одного элемента, а вот если элементов несколько. Вот пример:

<div class="eqv"><a href="#" class="minus">-</a><span></span><a href="#" class="plus">+</a></div>
<div class="eqv"><a href="#" class="minus">-</a><span></span><a href="#" class="plus">+</a></div>
<div id="sum"></div>

Вот код скрипта:

$(function(){
		$('.eqv').each(function (){
			var c=0;
			var div = $(this);
			div.find('a').bind('click',function(event){
				if (event.target.className == "plus"){
		  				c++;
				}
				else if (event.target.className == "minus"){
						c--;
				}
				div.find('span').text(c);
			})	
		});
	});

Проблема вот в чем. Создаются объекты, на каждый объект вешается клик и вызов функции. Для каждого объекта "с" будет разной, вот как бы их сложить и отобразить сумму в диве id="sum". У меня есть решение, но оно не оптимальное на мой взгляд. Есть скорее всего короткий путь

exec · #2 (**permalink**) 05.12.2010, 20:44

Создайте глобальную переменную и складывайте значения в неё.

ksa · #3 (**permalink**) 05.12.2010, 20:54

romanco, что будет с этими цифрами? Если окно закроется - куда они денутся?

ksa · #4 (**permalink**) 05.12.2010, 21:15

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

как бы их сложить и отобразить сумму в диве id="sum"

Как вариант...

<html>
<head>
<style>
</style>
<script>
function Inc(Obj) {
	var i=(Obj.className=='plus')? 1: -1
	var o=Obj.parentNode
	var j=+o.getElementsByTagName('span')[0].innerHTML
	o.getElementsByTagName('span')[0].innerHTML=j+i
	o=o.parentNode
	i=+o.getElementsByTagName('div')[0].getElementsByTagName('span')[0].innerHTML
	j=+o.getElementsByTagName('div')[1].getElementsByTagName('span')[0].innerHTML
	document.getElementById('sum').innerHTML=i+j
}
</script>
</head>
<body>
<div>
	<div class="eqv">
		<a href="#" class="minus" onclick='Inc(this)'>-</a><span></span><a href="#" class="plus" onclick='Inc(this)'>+</a>
	</div>
	<div class="eqv">
		<a href="#" class="minus" onclick='Inc(this)'>-</a><span></span><a href="#" class="plus" onclick='Inc(this)'>+</a>
	</div>
	<div id="sum"></div>
</div>
</body>
</html>

romanco · #5 (**permalink**) 05.12.2010, 22:17

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

Создайте глобальную переменную и складывайте значения в неё.

через глобальную не получается

по поводу варианта ksa да оно работает, но это вариант на чистом js,а как с jquery ?
Оно будет работать, кстати, только для двух элементов, но не для неопределенного кол-ва.

exec · #6 (**permalink**) 06.12.2010, 06:10

<html>
	<head>
		<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'>
		</script>
	</head>
	<body>
		<a href='javascript://' class='clck'>
			-
		</a>
		<span>
			0
		</span>
		<a href='javascript://' class='clck'>
			+
		</a>
		<br />
		<a href='javascript://' class='clck'>
			-
		</a>
		<span>
			0
		</span>
		<a href='javascript://' class='clck'>
			+
		</a>
		<br />
		<a href='javascript://' class='clck'>
			-
		</a>
		<span>
			0
		</span>
		<a href='javascript://' class='clck'>
			+
		</a>
		<div id='t'>
			0
		</div>
		<script type='text/javascript'>
			$("a.clck").click(function () {
				var n = $.trim(this.innerHTML);
				$(this)[{"+": "prev", "-": "next"}[n]]().html( parseInt($(this)[{"+": "prev", "-": "next"}[n]]().html()) + {"+": 1, "-": -1}[n] );
				$("#t").html(parseInt($("#t").html()) + {"+": 1, "-": -1}[n]);
			});
		</script>
	</body>
</html>

romanco · #7 (**permalink**) 06.12.2010, 14:47

эк вы навернули, оно работает, но честно говоря непонятно как ...
могли бы вы прокомментировать ? особенно впечатляет такого вида конструкция
$(this)[{}[]]()

exec · #8 (**permalink**) 06.12.2010, 15:26

$(this)[{"+": "prev", "-": "next"}[n]]()

/*
	Тут:
	{"+": "prev", "-": "next"} — простой хэш с ключами "+" и "-"
	n — содержимое ссылки без пробелов и пр. мусора (+ или -)
	{"+": "prev", "-": "next"}[n] — если n равен +, то будет вызван метод prev, иначе — next. Т.е. используется обращение к свойствам объекта в таком виде: object[property]
*/

romanco · #9 (**permalink**) 06.12.2010, 17:20

это примерно понятно, а вот каков алгоритм ?
1. создается массив объектов -ссылок $("a.clck")
2. на каждый объект вешается клик
3. кликаем + первой ссылки
4. вызывается метод prev(), который выделяет соседний элемент
5. потом в него пишем число равное =
parseInt($(this)[{"+": "prev", "-": "next"}[n]]().html())// берем число из элемента, из объекта ?
+ {"+": 1, "-": -1}[n] // добавляем к нему 1
6. пишем в id =t число, которое было в нем +1

В пункте 5-м не очень понятно, что происходит...

Форум

Справочник

Discord чат

Курсы javascript