jQuery выборка в массив
Добрый вечер. Имеем: код html
<div class="videoContainer"> <div class="previewImg"> <img src="mov/preview/gp.jpg" alt="Garry_Potter" /> </div> <div class="wigetVideo"> <div class="titleView"> Гарри Поттер и Дары смерти (часть 1) </div> <div class="timeView"> 1:42:00 </div> <div class="videoButton"> <div class="descriptionButton descriptionColor"> <img src="img/comment.png" alt="comment_button" width="30px" class="commentPic" /> </div> <div class="playButton playColor"> <img src="img/play.png" alt="play_button" width="30px" /> </div> <div class="profileButton profileColor"> <img src="img/profile.png" alt="profile_button" width="30px" /> </div> </div> </div> <div class="descriptionView"> <p>Гарри, Рон и Гермиона отправляются в рискованное путешествие, ведь им предстоит выполнить важную миссию: найти и уничтожить тайные источники бессмертия и могущества Волан-де-Морта — Крестражи. </p> </div> </div> Таких блоков будет много, в них будут меняться следующие блоки: <div class="previewImg"> , <div class="titleView">, <div class="timeView">, <div class="descriptionView"> Блоки выстраиваются по float. Как сделать, чтобы по щелчку на блоке <div class="descriptionButton"> выводилось только нужное описание <div class="descriptionView">, а не все сразу? Пример jQuery кода с подсчетом координат, чтобы всплывающая подсказка выводилась в видимой области экрана (еще не дописан): $(document).ready(function () {
$('.descriptionView').hide();
$('.descriptionButton').click(function() {
var ttLeft,
ttTop,
$this=$('.wigetVideo'),
$tip=$('.descriptionView'),
triggerPos = $this.offset(),
triggerH = $this.outerHeight(),
triggerW = $this.outerWidth(),
tipW = $tip.outerWidth(),
tipH = $tip.outerHeight(),
screenW = $(window).width(),
screenH = $(window).height(),
scrollTop = $(document).scrollTop();
if (screenH - triggerPos.top - tipH - triggerH - scrollTop > 0 ) {
ttTop = triggerPos.top + triggerH;
ttLeft = triggerPos.left-10;
} else {
ttTop = triggerPos.top-10;
ttLeft = triggerPos.left + triggerW;
}
$tip
.css({
left : ttLeft ,
top : ttTop,
position:"absolute"
}).fadeIn(100);
});// end click
$('.descriptionButton').mouseout(function() {
$('.descriptionView').fadeOut(100);
});
});//end ready
Я полагаю нужен массив. При ответе, представьте, что мне три года =) |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
.descriptionView {
display: none;
}
</style>
<script type="text/javascript">
$(function (){
$('.descriptionButton').click(function (){
$(this).parents('.wigetVideo').next('.descriptionView').toggle();
});
});
</script>
</head>
<body>
<div class="videoContainer">
<div class="previewImg">
<img src="mov/preview/gp.jpg" alt="Garry_Potter" />
</div>
<div class="wigetVideo">
<div class="titleView">
Гарри Поттер и Дары смерти (часть 1)
</div>
<div class="timeView">
1:42:00
</div>
<div class="videoButton">
<div class="descriptionButton descriptionColor">
<img src="img/comment.png" alt="comment_button" width="30px" class="commentPic" />
</div>
<div class="playButton playColor">
<img src="img/play.png" alt="play_button" width="30px" />
</div>
<div class="profileButton profileColor">
<img src="img/profile.png" alt="profile_button" width="30px" />
</div>
</div>
</div>
<div class="descriptionView">
<p>Гарри, Рон и Гермиона отправляются в рискованное путешествие,
ведь им предстоит выполнить важную миссию:
найти и уничтожить тайные источники бессмертия и могущества Волан-де-Морта — Крестражи.
</p>
</div>
</div>
</body>
</html>
|
Эээээ, во я балда. Так просто оказалось. Премного благодарен:thanks:
|
Еще вопрос: Объясню суть. Есть картинка, поверх нее наложен слой <div class="wigetVideo">. На этом слое есть кнопка с описанием. Если прокрутить страницу вниз (когда много этих картинок) и на самом нижнем ряду нажать на кнопку описания, оно отобразиться, но я не увижу весь текст. Для этого я хочу разместить описание в другом месте. Приведенный мною пример jQuery кода это делает, НО все отсчеты ведутся от первого <div class="wigetVideo">. Как мне сделать, чтобы отсчет производился от того <div class="wigetVideo">, в котором я кликну по кнопке с описанием? Другими словами, как мне обратиться к кнопке, чтобы скрипт знал в каком блоке <div class="videoContainer"> она находится и от какого блока необходимо вести отсчеты?
PS: надеюсь понятно получилось объяснить. |
Цитата:
Цитата:
|
Да ладно вам потешаться. Я подумал, что получится разобраться, а пол ночи и все утро сижу и туплю :cray:
|
Цитата:
Зная любого дитя всегда найдешь свой материнский videoContainer... $(<дитё>).parents('.videoContainer');
|
Спасибо за помощь огромное. Разобрался с элементами. Вот что надо было исправить в моем коде
$this=$(this).parents('.wigetVideo'),
$tip=$(this).parents('.wigetVideo').siblings('.descriptionView'),
|
| Часовой пояс GMT +3, время: 19:18. |