VPF::Использование цикла для добавления ссылок

WebMast

Дата 2.2.2010, 12:30 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: нет
Всего: 2

Доброго времени.

Уважаемые, нужна ваша помощь. Программирую на jQuery.
Нужно сделать добавления объекта. Каждый имеет свой уникальный id. Все работает кроме одного. Как мне привязывать расположение к этому объекту. Причем каждый id имеет свое расположение:

Код


    var a = 1;
  $(".add-znak a").click(function(){
    var idMark = a;
    $(".maps").append("<div class='marker' id='id"+idMark+"'></div>");
    $(".maps").mousemove(function(pos){
      $("#id"+idMark).show().css({top:pos.pageY-$(".maps").offset().top-10,left:pos.pageX-$(".maps").offset().left-10});
    });
    $(".maps").click(function(pos){
      var offset = $("#id"+idMark).offset();
      var topMk = pos.pageY-$("#id"+idMark).offset().top-10-$(".maps").offset().top + offset.top;
      var leftMk = pos.pageX-$("#id"+idMark).offset().left-10-$(".maps").offset().left + offset.left;
      $("#id"+idMark).css({top:topMk,left:leftMk});
      $(".maps").mousemove(function(pos){
        $("#id"+idMark).css({top:topMk,left:leftMk});
      });
    });
    a = a+1;
    return false;
  });

В чем проблема? Я предполагал, что после первого добавления элемента, ему присваивается свое расположение (top и left). Но оказалось, что при повторном добавлении, css свойства top и left всех становятся одинаковыми.

Очень надеюсь на вашу помощь..

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

IDVsbruck

Дата 2.2.2010, 21:01 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22

Ужасный стиль.
И на jQuery не программируют, программируют на javascript с использованием фреймворка jQuery.
Ошибка классическая и общепринятая: содержимое хендлера события выполняется в момент срабатывания события, а не в момент формирования.

Вот вариант, который может работать (проверять в работе не буду):

Код


var idMark = 0;
$(".add-znak a").click(function(){
    var marker = $("div").attr({"className":"marker", "id":"id" + ++idMark});
    $(".maps")
        .append(marker)
        .bind("mousemove", {marker:marker}, function(event){
            $(event.data.marker).show().css({top:event.pageY - $(this).offset().top - 10, left:event.pageX - $(this).offset().left - 10});
        })
        .bind("click", {marker:marker}, function(event){
            var marker = $(event.data.marker);
            var top_marker = event.pageY - marker.offset().top - 10 - $(this).offset().top + marker.offset().top;
            var left_marker = event.pageX - marker.offset().left - 10 - $(this).offset().left + marker.offset().left;
            marker.css({top:top_marker, left:left_marker});
            $(this).bind("mousemove", {marker:marker, left_marker:left_marker, top_marker:top_marker}, function(event){
                $(event.data.marker).css({top:event.data.top_marker, left:event.data.left_marker});
            });
        });
    return false;
});

Это ничто иное, как реализация замыканий у jQuery.

Это сообщение отредактировал(а) IDVsbruck - 3.2.2010, 01:18

WebMast

Дата 3.2.2010, 19:08 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: нет
Всего: 2

Спасибо.. Решение было найдено, но за стиль спасибо.

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »