Оптимизация кода
я в jQuery и JavaScript новичок и у меня такой вопрос - как уменьшить(оптимизировать) нижеприведенный код:
<script type="text/javascript" language="javascript"> $(document).ready(function(){ /******************************************************************/ /******************************************************************/ $("#uk_btn").mouseenter(function(){ $("#uk_btn ul").fadeToggle("fast"); $("#mup_btn ul").hide(); }); $("#mup_btn").mouseenter(function(){ $("#mup_btn ul").fadeToggle("fast"); $("#uk_btn ul").hide(); }); /******************************************************************/ /******************************************************************/ $(".first_sub_box_btn").mouseenter(function(){ $(".first_sub_box_btn .first_left_img").attr("src","images/left_tri_02.png"); }); $(".first_sub_box_btn").mouseleave(function(){ $(".first_sub_box_btn .first_left_img").attr("src","images/left_tri_01.png"); }); /******************************************************************/ $(".first_inner_dropdown_btn").mouseenter(function(){ $(".first_inner_dropdown_btn .first_top_img").attr("src","images/top_tri_02.png"); }); $(".first_inner_dropdown_btn").mouseleave(function(){ $(".first_inner_dropdown_btn .first_top_img").attr("src","images/top_tri_01.png"); }); /******************************************************************/ /******************************************************************/ $("#button_menu_02").mouseenter(function(){ $("#button_menu_02 #top_menu_dropdowm_box_02").fadeToggle("fast"); }); $("#button_menu_02").mouseleave(function(){ $("#button_menu_02 ul").hide(); }); /******************************************************************/ /******************************************************************/ $("#button_menu_03").mouseenter(function(){ $("#button_menu_03 #top_menu_dropdowm_box_03").fadeToggle("fast"); }); $("#button_menu_03").mouseleave(function(){ $("#button_menu_03 ul").hide(); }); /******************************************************************/ /******************************************************************/ $("#button_menu_04").mouseenter(function(){ $("#button_menu_04 #top_menu_dropdowm_box_04").fadeToggle("fast"); }); $("#button_menu_04").mouseleave(function(){ $("#button_menu_04 ul").hide(); }); /******************************************************************/ /******************************************************************/ $("#button_menu_05").mouseenter(function(){ $("#button_menu_05 #top_menu_dropdowm_box_05").fadeToggle("fast"); }); $("#button_menu_05").mouseleave(function(){ $("#button_menu_05 ul").hide(); }); /******************************************************************/ }); </script> работает оно так : код перехватывает события мыши на кнопке и и выполняет определенные действия. кнопок много и я понимаю что можно как-то это дело уменьшить всего до несколько строчек. вместо того что бы писать событие для каждого элемента. заранее благодарю. |
Прочитать уже, наконец, какую-нибудь статью о написании оптимального кода на jQuery (года 2 назад их было тысячи).
Каждый раз, когда Вы пишете Цитата:
Также почитайте что-нибудь про fluent interface aka chaining |
ну вот смотрите на Javascript это выглядило бы примерно так:
function(event) { event = event || window.event var t = event.target || event.srcElement } то есть тут вроде как определяется автоматом над каким элементом происходит событие, а дальше можно просто через switch определить конкретный олемент. но у меня вопрос как такое делается на jQuery |
В jQuery тоже можно получить этот элемент http://api.jquery.com/event.currentTarget/
|
Часовой пояс GMT +3, время: 00:56. |