Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Оптимизация кода (https://javascript.ru/forum/jquery/28297-optimizaciya-koda.html)

SunTechnique 14.05.2012 11:27

Оптимизация кода
 
я в 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>


работает оно так : код перехватывает события мыши на кнопке и и выполняет определенные действия. кнопок много и я понимаю что можно как-то это дело уменьшить всего до несколько строчек. вместо того что бы писать событие для каждого элемента.
заранее благодарю.

B@rmaley.e><e 14.05.2012 11:33

Прочитать уже, наконец, какую-нибудь статью о написании оптимального кода на jQuery (года 2 назад их было тысячи).
Каждый раз, когда Вы пишете
Цитата:

Сообщение от SunTechnique
$(".first_sub_box_btn .first_left_img"")

происходит поиск элемента по селектору в документе. Поиск по имени класса весьма дорог (по сравнению с выборкой по id).

Также почитайте что-нибудь про fluent interface aka chaining

SunTechnique 14.05.2012 11:43

ну вот смотрите на Javascript это выглядило бы примерно так:
function(event) {
  event = event || window.event
  var t = event.target || event.srcElement
}


то есть тут вроде как определяется автоматом над каким элементом происходит событие, а дальше можно просто через switch определить конкретный олемент. но у меня вопрос как такое делается на jQuery

B@rmaley.e><e 14.05.2012 11:55

В jQuery тоже можно получить этот элемент http://api.jquery.com/event.currentTarget/


Часовой пояс GMT +3, время: 00:56.