Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2012, 12:40
Новичок на форуме
Отправить личное сообщение для Arroyo Посмотреть профиль Найти все сообщения от Arroyo
 
Регистрация: 12.08.2012
Сообщений: 7

Использование цикла Each
Здравствуйте. У меня два списка. При наведении на пункт первого списка показывается тот же по счету пункт второго списка. В итоге получается куча одинакового кода. Не подскажите как тут использовать цикл each?

$(document).ready(function(){
	
    	$("#slide-photo li:not(:first)").hide();
	$("#slide-text li:first").addClass("active");
		
	$("#slide-text li").eq(0).mouseover(function(){			
		$("#slide-photo li").eq(0).show();				
		$("#slide-photo li:not(:eq(0))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
	});		

	$("#slide-text li").eq(1).mouseover(function(){			
		$("#slide-photo li").eq(1).show();				
		$("#slide-photo li:not(:eq(1))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
	});	
	
	$("#slide-text li").eq(2).mouseover(function(){			
		$("#slide-photo li").eq(2).show();				
		$("#slide-photo li:not(:eq(2))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
			
	
	});
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2012, 14:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Arroyo,
Выложите рабочий код с HTML
Для запуска обрамление такое

[HTML run height=340][/HTML]
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2012, 14:58
Новичок на форуме
Отправить личное сообщение для Arroyo Посмотреть профиль Найти все сообщения от Arroyo
 
Регистрация: 12.08.2012
Сообщений: 7

Примерно так (ccs не весь):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример страницы</title>
	<link href="reset.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function(){
	

	
    	$("#slide-photo li:not(:first)").hide();
		$("#slide-text li:first").addClass("active");
		
	$("#slide-text li").eq(0).mouseover(function(){			
		$("#slide-photo li").eq(0).show();				
		$("#slide-photo li:not(:eq(0))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
	});		

	$("#slide-text li").eq(1).mouseover(function(){			
		$("#slide-photo li").eq(1).show();				
		$("#slide-photo li:not(:eq(1))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
	});		
	$("#slide-text li").eq(2).mouseover(function(){			
		$("#slide-photo li").eq(2).show();				
		$("#slide-photo li:not(:eq(2))").hide();
		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
			
	
	});		
	
	
	 
});

</script>

<style type="text/css">
#slide-text li.active {
	background: #ddd;
}

#slide-text li {
	display:block;
	padding: 10px 20px;
	background:url(img/slide.gif) repeat-y;
}

#slide-photo {
	display:block;
	width: 360px;
	float:left;
}

#slide-text {
	margin-left: 380px;
}
</style>


</head>
<body>


              
              	<div id="slide">
                
                    <ul id="slide-photo">
                    	<li>
                        	<a href="#"><img src="img/592426772.jpg" width="360" height="203"></a>
                            <h3><a href="#">Ангела Меркель боится грозы и мечтает поужинать с Висенте дель Боске</a></h3>
                            <p>Канцлер Германии Ангела Меркель ответила на вопросы немецких знаменитостей, признавшись им, что очень боится грозы, а пригласить на ужин хотела бы тренера футбольной сборной Испании Винсенте дель Боске.
                            </p>
                        </li>
                    	<li>
                        	<a href="#"><img src="img/714208210.jpg" width="360" height="203"></a>
                            <h3><a href="#">Полицейский может лишиться работы из-за слов о дорогах Владивостока</a></h3> 
                            <p>Сотрудник управления ГИБДД по Приморскому краю, допустивший распространение информации о неготовности дорог Владивостока к открытию мостов, может быть снят с должности, сообщает в пятницу УМВД по региону.
                            </p>                           
                        </li>
                    	<li>
                        	<a href="#"><img src="img/720765076.jpg" width="360" height="203"></a>
                            <h3><a href="#">Боксер Айрапетян завоевал бронзу на Олимпиаде в Лондоне</a></h3>
                            <p>Китайский боксер Цзоу Шимин выиграл золотую медаль Олимпиады в Лондоне в турнире весовой категории до 49 кг.
                            </p>
                        </li>
                    </ul>
                    
                    <ul id="slide-text">
                    	<li><a href="#">Ангела Меркель боится грозы и мечтает поужинать с Висенте дель Боске</a></li>
                    	<li><a href="#">Полицейский может лишиться работы из-за слов о дорогах Владивостока</a></li>
                    	<li><a href="#">Боксер Айрапетян завоевал бронзу на Олимпиаде в Лондоне</a></li>
                    </ul>
                
                </div>
              



</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2012, 16:17
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример страницы</title>
	<link href="reset.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>


<style type="text/css">
#slide-text li.active {
	background: #ddd;
}

#slide-text li {
	display:block;
	padding: 10px 20px;
	background:url(img/slide.gif) repeat-y;
}

#slide-photo {
	display:block;
	width: 360px;
	float:left;
}

#slide-text {
	margin-left: 380px;
}
</style>


</head>
<body>


              
              	<div id="slide">
                
                    <ul id="slide-photo">
                    	<li>
                        	<a href="#"><img src="img/592426772.jpg" width="360" height="203"></a>
<div class=wrp> 
                            <h3><a href="#">Ангела Меркель боится грозы и мечтает поужинать с Висенте дель Боске</a></h3>
                            <p>Канцлер Германии Ангела Меркель ответила на вопросы немецких знаменитостей, признавшись им, что очень боится грозы, а пригласить на ужин хотела бы тренера футбольной сборной Испании Винсенте дель Боске.
                            </p>
                        </li>
                    	<li>
                        	<a href="#"><img src="img/714208210.jpg" width="360" height="203"></a>
                            <h3><a href="#">Полицейский может лишиться работы из-за слов о дорогах Владивостока</a></h3> 
                            <p>Сотрудник управления ГИБДД по Приморскому краю, допустивший распространение информации о неготовности дорог Владивостока к открытию мостов, может быть снят с должности, сообщает в пятницу УМВД по региону.
                            </p>
                        </li>
                    	<li>
                        	<a href="#"><img src="img/720765076.jpg" width="360" height="203"></a>
                            <h3><a href="#">Боксер Айрапетян завоевал бронзу на Олимпиаде в Лондоне</a></h3>
                            <p>Китайский боксер Цзоу Шимин выиграл золотую медаль Олимпиады в Лондоне в турнире весовой категории до 49 кг.
                            </p>
                        </li>
                    </ul>
                    
                    <ul id="slide-text">
                    	<li><a href="#">Ангела Меркель боится грозы и мечтает поужинать с Висенте дель Боске</a></li>
                    	<li><a href="#">Полицейский может лишиться работы из-за слов о дорогах Владивостока</a></li>
                    	<li><a href="#">Боксер Айрапетян завоевал бронзу на Олимпиаде в Лондоне</a></li>
                    </ul>
                
                </div>
              
    <script type="text/javascript">
$(document).ready(function(){
	

	
    	$("#slide-photo li:not(:first)").hide();
		$("#slide-text li:first").addClass("active");
		

	$("#slide-text li").mouseover(function(){
                var index = $("#slide-text li").index(this);
		$("#slide-photo li").hide();
		$("#slide-photo li").eq(index).show();
		$("#slide-photo li p").eq(index).hide();
		$("#slide-photo li p").eq(index).slideDown('880');

		$("#slide-text li").addClass("active");
		$(this).siblings("#slide-text li").removeClass("active");
		return false;
	});
	
	 
});

</script>


</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2012, 17:27
Новичок на форуме
Отправить личное сообщение для Arroyo Посмотреть профиль Найти все сообщения от Arroyo
 
Регистрация: 12.08.2012
Сообщений: 7

Спасибо огромное!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FileManager c использование ajax nata031189 Серверные языки и технологии 0 30.03.2012 02:40
Про использование cookies zloctb Общие вопросы Javascript 3 11.02.2012 09:36
Логика действий на примере цикла for ufaset Общие вопросы Javascript 1 27.11.2011 22:04
Как взятые данные с цикла присоединить к одной переменной ? saturn Элементы интерфейса 2 25.11.2011 13:01
как отобразить в окне значения счетчика во время выполнения цикла FOR Алекс97 Общие вопросы Javascript 5 06.09.2008 10:36