Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2010, 20:40
Интересующийся
Отправить личное сообщение для romanco Посмотреть профиль Найти все сообщения от romanco
 
Регистрация: 24.11.2010
Сообщений: 16

Хитрый алгоритм
]Добрый день
Как то поднимал на форуме данную проблему, но до сих пор ее не закрыл.
Суть проблемы. Задачка называется "счетчик кликов". Есть "плюс" и "минус", кликаем либо одно либо другое - изменяется итоговое число. Все бы хорошо для одного элемента, а вот если элементов несколько. Вот пример:
<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". У меня есть решение, но оно не оптимальное на мой взгляд. Есть скорее всего короткий путь
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2010, 20:44
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Создайте глобальную переменную и складывайте значения в неё.
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2010, 20:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

romanco, что будет с этими цифрами? Если окно закроется - куда они денутся?
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2010, 21:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2010, 22:17
Интересующийся
Отправить личное сообщение для romanco Посмотреть профиль Найти все сообщения от romanco
 
Регистрация: 24.11.2010
Сообщений: 16

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

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

Последний раз редактировалось romanco, 05.12.2010 в 22:43.
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2010, 06:10
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

<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>
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2010, 14:47
Интересующийся
Отправить личное сообщение для romanco Посмотреть профиль Найти все сообщения от romanco
 
Регистрация: 24.11.2010
Сообщений: 16

эк вы навернули, оно работает, но честно говоря непонятно как ...
могли бы вы прокомментировать ? особенно впечатляет такого вида конструкция
$(this)[{}[]]()
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2010, 15:26
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

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

/*
	Тут:
	{"+": "prev", "-": "next"} — простой хэш с ключами "+" и "-"
	n — содержимое ссылки без пробелов и пр. мусора (+ или -)
	{"+": "prev", "-": "next"}[n] — если n равен +, то будет вызван метод prev, иначе — next. Т.е. используется обращение к свойствам объекта в таком виде: object[property]
*/
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2010, 17:20
Интересующийся
Отправить личное сообщение для romanco Посмотреть профиль Найти все сообщения от romanco
 
Регистрация: 24.11.2010
Сообщений: 16

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Алгоритм плавной смены фона или изображения vandy3 Общие вопросы Javascript 6 11.11.2010 00:56
Алгоритм работы текстового редактора балерун Общие вопросы Javascript 1 18.07.2010 11:31
Пишу хитрый unload помогите разобраться tazododu Элементы интерфейса 7 24.04.2010 22:20
Google maps алгоритм приближения к точке mycoding Общие вопросы Javascript 2 20.04.2010 13:58