Задача: необходимо найти решение как переключаться между тремя вариантами одной ссылки:
1. "Добавить к сравнению" - по умолчанию
2. "Добавлен к сравнению"
3. "Сравнить"
Вопрос:
как сделать, чтобы при перезагрузке страницы состояние ссылки сохранялось по последней установке(например, если "Добавлен к сравнению", то после перезагрузки состояние ссылки было ""Добавлен к сравнению"", а если "Сравнить", то "Сравнить"?
Спасибо
Спустя 3 часа, 49 минут, 15 секунд (17.07.2012 - 21:14) bodja написал(а):
| Цитата |
| 1. можно ли подобную задачу решить проще? что необходимо поправить в коде. |
можно ,но менять прийдется все
| Цитата |
| 2. как сделать, чтобы при перезагрузке страницы состояние ссылки сохранялось по последней установке |
Если куки неугодили ,тогда window.name как вариант,ну или сессии на серваке держать.
Спустя 5 минут, 44 секунды (17.07.2012 - 21:20) skolozhabskiy написал(а):
bodja
спасибо за ответ, но что вы имеете ввиду "можно, но менять придется все"? что именно и по какому пути решение задачи видите вы? можно подробнее.
спасибо
спасибо за ответ, но что вы имеете ввиду "можно, но менять придется все"? что именно и по какому пути решение задачи видите вы? можно подробнее.
спасибо
Спустя 38 минут, 51 секунда (17.07.2012 - 21:59) bodja написал(а):
| Цитата |
| спасибо за ответ, но что вы имеете ввиду "можно, но менять придется все"? что именно и по какому пути решение задачи видите вы? можно подробнее. |
Не хочу разводить холивар.Тут много любителей квери.
Причем даже если писать на чистом JS тут тоже могут найтись защитники событийного подхода.
Мое решение - это обьект на каждый
| Цитата |
| <div id="product-compare-links-182" class="compare_links"><a id="tocomparison-182" class="compare" href="javascript:void(0)" data-compare-product="182" data-compare="false">Добавить к сравнению</a></div> |
клонируем сколько нужно,вешаем события через замыкания и привязываем кнопку к этому же обьекту.Все остально ,передача ,изменение состояния - это уже дело техники.
Спустя 8 минут, 47 секунд (17.07.2012 - 22:07) skolozhabskiy написал(а):
мне не совсем понятно что клонировать, там привязка к конкретному id и три состояния и два разных класса. спасибо
Спустя 12 часов, 56 минут, 42 секунды (18.07.2012 - 11:04) bodja написал(а):
Хорошо,обьясняю на пальцах :D
ХТМЛ
яваскрипт
Что сделали?
Написали класс Product и наследовали в нем элементы div и a ,добавили к ним классы или что еще нам нужно,повесили событие onclick на div и через замыкание получили доступ к обьекту из DOM.
В этом же событии разруливаем разные состояния кнопки.
И в конце располагаем,что намутили в документе.
Далее по загрузке создаем 10 обьектов ,можно 100 :D ,клацаем :D :D :D
Как заметили ,идешников нет ,элементы созданы в классе ,соответственно мы можем получить доступ к ним через нужный нам обьект,а не вычислять их через селекторы постоянно.
ХТМЛ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="./script.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
яваскрипт
function Product() {
this.mode = 0;
this.div = document.createElement('div');
this.div.className = 'compare_links';
this.div.style.cursor = 'pointer';
this.a = document.createElement('a');
this.a.className = 'compare';
this.a.innerHTML = 'Добавить к сравнению';
this.div.appendChild(this.a);
this.div.onclick = function (o) {
return function () {
switch (o.mode) {
case 0:
o.a.innerHTML = 'Сравнить';
o.mode = 1;
break;
case 1:
o.a.innerHTML = 'Сравнили уже';
o.mode = 2;
break;
case 2:
o.a.innerHTML = 'Добавить к сравнению';
o.mode = 0;
}
}
}
(this);
document.body.appendChild(this.div);
}
window.onload = function () {
var pro = [];
for (var i = 0; i < 10; i++) {
pro[i] = new Product();
}
}
Что сделали?
Написали класс Product и наследовали в нем элементы div и a ,добавили к ним классы или что еще нам нужно,повесили событие onclick на div и через замыкание получили доступ к обьекту из DOM.
В этом же событии разруливаем разные состояния кнопки.
И в конце располагаем,что намутили в документе.
Далее по загрузке создаем 10 обьектов ,можно 100 :D ,клацаем :D :D :D
Как заметили ,идешников нет ,элементы созданы в классе ,соответственно мы можем получить доступ к ним через нужный нам обьект,а не вычислять их через селекторы постоянно.