0

Сейчас на странице есть несколько объектов, имеющих класс .foo. При клике на любой из этих объектов блок #bar меняет свое положение.

$(function() {
  $('.foo').click(function(){
    var foo_top  = $(this).position().top;
    var foo_left = $(this).position().left;

    $('#bar').offset({top: foo_top + 10, left: foo_left + 10});
  });
});

Т.к. код разрастается, хочется задание стилей сделать отдельной функцией. Как лучше это сделать?

4
  • Что вы подразумеваете под "Декодированием"?
    – Rules
    Commented 25 мая 2012 в 8:47
  • Оформление этого объекта на странице - задание его координат, размеров. Не очень удобное слово, но лучше не придумал. Commented 25 мая 2012 в 8:51
  • 1
    Это называется ЗАДАНИЕ СТИЛЕЙ :)
    – Rules
    Commented 25 мая 2012 в 8:59
  • Поправил, спасибо. Commented 25 мая 2012 в 9:09

2 ответа 2

2

тогда так:

function setStyle(event){
  var foo_top  = $(this).position().top;
  var foo_left = $(this).position().left;
  $('#bar').offset({top: foo_top + event.data.top, left: foo_left + event.data.left});
}
$(function() {
  $('.foo').on('click', {top: 10, left: 10}, setStyle);
});
0

Так что ли?:

function setStyle(){
 var foo_top  = $(this).position().top;
 var foo_left = $(this).position().left;
 $('#bar').offset({top: foo_top + 10, left: foo_top + 10});
}
$(function() {
  $('.foo').click(setStyle);
}
5
  • Минус этого подхо лишь в невозможности передать параметры ф-ции setStyle но эту проблему можно решить использую ф-цию обёртку...
    – Rules
    Commented 25 мая 2012 в 9:59
  • Не взлетает. Что я делаю не так? Commented 25 мая 2012 в 11:22
  • 1
    потому что у тов. @Rules скобки в ответе недоставлены, а я просто скопипастил, и строка left: foo_top + 10 должна выглядеть так: left: foo_left + 10 - это уже у вас в вопросе ошибочка.
    – Spectre
    Commented 25 мая 2012 в 11:42
  • @Spectre, ошибку поправил. Гадаю, где скобок не хватает. Commented 25 мая 2012 в 11:51
  • 1
    ВНИМАНИЕ!!! спойлер
    – Spectre
    Commented 25 мая 2012 в 12:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.