Использование цикла 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;
});
|
Arroyo,
Выложите рабочий код с HTML Для запуска обрамление такое [HTML run height=340][/HTML] |
Примерно так (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>
|
<!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>
|
Спасибо огромное!
|
| Часовой пояс GMT +3, время: 01:32. |