Оптимизация кода
я в 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, время: 17:54. |