Хитрый алгоритм
]Добрый день
Как то поднимал на форуме данную проблему, но до сих пор ее не закрыл. Суть проблемы. Задачка называется "счетчик кликов". Есть "плюс" и "минус", кликаем либо одно либо другое - изменяется итоговое число. Все бы хорошо для одного элемента, а вот если элементов несколько. Вот пример: <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". У меня есть решение, но оно не оптимальное на мой взгляд. Есть скорее всего короткий путь :) |
Создайте глобальную переменную и складывайте значения в неё.
|
romanco, что будет с этими цифрами? Если окно закроется - куда они денутся?
|
Цитата:
<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>
|
Цитата:
по поводу варианта ksa да оно работает, но это вариант на чистом js,а как с jquery ? Оно будет работать, кстати, только для двух элементов, но не для неопределенного кол-ва. |
<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>
|
эк вы навернули, оно работает, но честно говоря непонятно как ...
могли бы вы прокомментировать ? особенно впечатляет такого вида конструкция $(this)[{}[]]() |
$(this)[{"+": "prev", "-": "next"}[n]]()
/*
Тут:
{"+": "prev", "-": "next"} — простой хэш с ключами "+" и "-"
n — содержимое ссылки без пробелов и пр. мусора (+ или -)
{"+": "prev", "-": "next"}[n] — если n равен +, то будет вызван метод prev, иначе — next. Т.е. используется обращение к свойствам объекта в таком виде: object[property]
*/
|
это примерно понятно, а вот каков алгоритм ?
1. создается массив объектов -ссылок $("a.clck") 2. на каждый объект вешается клик 3. кликаем + первой ссылки 4. вызывается метод prev(), который выделяет соседний элемент 5. потом в него пишем число равное = parseInt($(this)[{"+": "prev", "-": "next"}[n]]().html())// берем число из элемента, из объекта ? + {"+": 1, "-": -1}[n] // добавляем к нему 1 6. пишем в id =t число, которое было в нем +1 В пункте 5-м не очень понятно, что происходит... |
| Часовой пояс GMT +3, время: 02:19. |