| |
|
|
| | Всем привет.
Столкнулся с проблемкой такой в ООП.
Написал класс Ligthbox, который при его обьявлении вешает собитие на ссылку и открывает скрытый div, то есть обычный лайтбокс.
Инициализируется он таким образом
var a1 = new Ligthbox('a1');
|
В агрументе просто передаем строку (css класс) и после инициализации обьект (ссылка) с классом a1 открывает див с классом a1-popup.
Это все классно работает, если на странице только 1 такой лайтбокс, но если их будет несколько определено, то отрабатывать будет только тот, который был обьявлен последним.
То есть если будет так например
var a1 = new Ligthbox('a1');
var a2 = new Ligthbox('a2');
|
то при клике на ссилку с классом a1 или a2 будет отрабатывать только a2. То есть на какую бы ссылку ни кликнул (a1 или a2) всегда будет открыватся div с классом a2-popup. Все предидущие игнорируются, событие вешается на последний обьект.
Как я понимаю, в javascript при создании экземпляра класса, на самом деле он не создается (как в php например), а дергается просто функция.
Как можно решить проблему, что б при использовании одного класса вешать события на несколько обьектов на странице?
Ниже приведен код. Все максимально уменьшено, главное уловить цель.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function Ligthbox(link) {
this.obj = jQuery('.' + link + '-popup');
this.link = jQuery('.' + link);
$LT = this;
this.link.click(function() {
$LT.obj.show();
return false;
});
}
jQuery(document).ready(function() {
var a1 = new Ligthbox('a1');
var a2 = new Ligthbox('a2');
});
</script>
</head>
<body>
<a class="a1" href="">Link 1</a>
<a class="a2" href="">Link 2</a>
<div class="a1-popup" style="display:none;"><h1>Test lightbox a1</h1></div>
<div class="a2-popup" style="display:none;"><h1>Test lightbox a2</h1></div>
</body>
</html>
|
Буду благодарен за любые ответы.
Всех с новым годом! :) | |
| |
|
|
| |
|
|
| |
для: andrew123
(03.01.2012 в 15:03)
| | | В Javascript'e классов НЕТ, см. http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=79292
Вы создали объект под именем Ligthbox
Обращаясь к этому объекту в первый раз --> var a1 = new Ligthbox('a1');
вы определяете ТРИ его свойства:
Ligthbox.obj, Ligthbox.link и Ligthbox.link.click,
сиречь, устанавливаете, что объект должен быть белым, пушистым и говорить "Мяу"
Обращаясь к этому же объекту в другой раз --> var a2 = new Ligthbox('a2');
вы ПЕРЕопределяете эти же ТРИ свойства этого же объекта:
Ligthbox.obj, Ligthbox.link и Ligthbox.link.click,
сиречь ЗАПРЕЩАЕТЕ ему быть белым, пушистым и говорить "Мяу", а наоборот,
делаете его зелёным, склизким и заставляете квакать.
Поняли теперь - в чём у вас проблема? :-) | |
| |
|
|
| |
|
|
| |
для: АЯС
(03.01.2012 в 15:26)
| | | Спасибо за пост, очень познавательно!
Собственно, как я и предполагал никакого екземпляра нет, а просто вызывается функция (и переписывает свойства обьекта). С этим разобрался.
А есть идеи как можно реализовать это, чтоб Lightbox мог обрабатывать несколько обьектов на странице?
Было б неплохо создавать свойства с динамическими именами, но такого нет в javascript.
Событие вешается нормально, все ссылки на клик отрабатывают, за исключением того, что не то что надо, то есть используют значения не те, что надо. | |
| |
|
|
| |
|
|
| |
для: andrew123
(03.01.2012 в 15:42)
| | | Всё просто - в качестве разных объектов надо использовать уже существующие разные объекты.
А именно - у вас на странице существуют ДВЕ ссылки. Это и есть два разных объекта
Сейчас вы их попытались идентифицировать именами классов:
<a class="a1" href="">Link 1</a>
<a class="a2" href="">Link 2</a>
|
Подход неверный.
В DHTML для уникальной идентификации объектов применяется атрибут id.
Сиречь вам следует убрать имена классов, заменив их идентификаторами:
<a id="a1" href="">Link 1</a>
<a id="a2" href="">Link 2</a>
|
Аналогично следует заменить классы на id и для всплывающих div'ов:
<div id="a1_popup" style="display:none;"><h1>Test lightbox a1</h1></div>
<div id="a2_popup" style="display:none;"><h1>Test lightbox a2</h1></div>
|
-----
Итак, правило 1: для тегов - не классы, а идентификаторы. Классы в HTML существуют только и исключительно для визуального определения внешнего вида тегов. Использовать их в динамической модели как идентификатор - МОВЕТОН.
правило 2: значения имён, что переменных, что идентификаторов, что классов, должны содержать арабские цифры, латинские буквы любого регистра и символ подчёркивания, и начинаться они должны с буквы.
Использование всяких дефисов и квадратных скобочек - удел не особо умных людей.
Правило 1 правилом 2 подтверждается - ибо в именах классов допускаются так называемые "наборные комбинации" - можно писать два и более имён классов, разделяемых пробелом.
-----
Далее: объект-функцию Ligthbox () следует использовать для определения свойств этих разных объектов. А именно для свойства click (), сиречь вашу запись для события ready
var a1 = new Ligthbox('a1');
var a2 = new Ligthbox('a2');
|
следует переписать так:
Ligthbox('a1'); Ligthbox('a2');
|
Соответственно, и функция-объект Ligthbox должна определять не собственные как объекта свойства, а должна определять свойства этих самых разных существующих объектов (двух ссылок с разными id)
function Ligthbox (link)
{
document.getElementById (link).onclick = function ()
{document.getElementById (link + '_popup').style.display = 'block'}
}
|
Вот так в самом первом приближении. | |
| |
|
|
