Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Использование цикла для добавления ссылок

Автор: WebMast 2.2.2010, 12:30

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

Уважаемые, нужна ваша помощь. Программирую на 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 всех становятся одинаковыми.

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

Автор: IDVsbruck 2.2.2010, 21:01

Ужасный стиль.
И на 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.

Автор: WebMast 3.2.2010, 19:08

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