Оптимизация кода
Привет!
Есть функция, привязанная к событию .on( "click" ) Эта функция "перематывает" контент страницы на нужную соответствующую секцию. $( ".red" ).on( "click", function(){ $( "html, body" ).animate({ scrollTop: $( ".red_zone" ).offset().top }, 1000); }); $( ".blue" ).on( "click", function(){ $( "html, body" ).animate({ scrollTop: $( ".blue_zone" ).offset().top }, 1000); }); Допустим, таких секций много. Каким образом можно оптимизировать код, учитывая, что функция scrollTop всегда будет "перематывать" страницу на одну и ту же величину (отступ в 1000px), но всегда к разным сецкиям. Т.е. каждой кнопке соответствует своя секция. 10 разных кнопок - 10 разных секций но с одной и той же функцией по сути. И второй вопрос: к примеру, есть функция doSmth(). Можно ли её прописать как дефолт к событию .on( "click" ) для моих элементов? Т.е., чтобы не приходилось в конце каждой такой функции вызывать функцию doSmth() "вручную" как показано в коде ниже? $( ".red" ).on( "click", function(){ $( "html, body" ).animate({ scrollTop: $( ".red_zone" ).offset().top }, 1000); doSmth(); }); $( ".blue" ).on( "click", function(){ $( "html, body" ).animate({ scrollTop: $( ".blue_zone" ).offset().top }, 1000); doSmth(); }); |
Про делегирование прочитай.
|
|
Decode,
Я немного знаком с делегированием. Я понимаю, что оно актуально для кода с множеством вложений. Чтобы при клике на любом "слое" событие срабатывало на корневом элементе. Каким образом его использовать в моём вопросе, мне непонятно. |
Alexander Belov, дак тебе же Poznakomlus привел пример.
|
Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял. |
Цитата:
|
Decode,
Благодарю. Увидел. |
Объясните, пожалуйста, почему именно делегирование использовалось для решения такой задачи (в чём его
преимущество в данном случае?). + не понял, почему в функции прописано return false Без возврата false тоже работает, вроде. * Created by Fedor Vlasenko [email]VlasenkoFedor@mail.ru[/email] */ !function($){ $(document).on('click', 'a[href^=#]', function () { $('html, body').animate({ scrollTop: $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); return false; }); }(jQuery); |
отменяем действие стандартного обработчика клика по ссылке
не пишем историю, не изменяем адресную строку можно использовать и event.preventDefault() |
Часовой пояс GMT +3, время: 14:45. |