Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2012, 11:27
Аспирант
Отправить личное сообщение для SunTechnique Посмотреть профиль Найти все сообщения от SunTechnique
 
Регистрация: 29.08.2011
Сообщений: 30

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


работает оно так : код перехватывает события мыши на кнопке и и выполняет определенные действия. кнопок много и я понимаю что можно как-то это дело уменьшить всего до несколько строчек. вместо того что бы писать событие для каждого элемента.
заранее благодарю.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2012, 11:33
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Прочитать уже, наконец, какую-нибудь статью о написании оптимального кода на jQuery (года 2 назад их было тысячи).
Каждый раз, когда Вы пишете
Сообщение от SunTechnique
$(".first_sub_box_btn .first_left_img"")
происходит поиск элемента по селектору в документе. Поиск по имени класса весьма дорог (по сравнению с выборкой по id).

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

Последний раз редактировалось B@rmaley.e><e, 14.05.2012 в 11:35.
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2012, 11:43
Аспирант
Отправить личное сообщение для SunTechnique Посмотреть профиль Найти все сообщения от SunTechnique
 
Регистрация: 29.08.2011
Сообщений: 30

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


то есть тут вроде как определяется автоматом над каким элементом происходит событие, а дальше можно просто через switch определить конкретный олемент. но у меня вопрос как такое делается на jQuery
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2012, 11:55
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация кода (создание горизонтального меню) IONEX jQuery 0 16.01.2012 05:07
Оптимизация кода Prizrak177 Общие вопросы Javascript 0 15.02.2011 16:36
Оптимизация кода. Правила хорошего тона при написании скриптов [ANTI]CheateR jQuery 1 18.09.2010 08:41
Оптимизация кода mycoding Общие вопросы Javascript 6 21.04.2010 10:42
Помогите пожалуйста. Оптимизация кода. touch_the_sky Элементы интерфейса 21 18.06.2009 19:53