Не работает код, при дублировании блоков!
Умные люди, прошу Вашей помощи.
Суть вопроса. Есть такой код:
<div class="block_disc">
<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
<div class="disc_descript">
<div class="disc_link">
<a id="link1" class="disc_a" href="#">Описание</a>
</div>
<div class="disc_link top-right_radius">
<a id="link2" class="disc_a top-right_radius"href="#">Треки-лист</a>
</div>
</div>
<div id="div1" class="disc_content1">
</div>
<div id="div2" class="disc_content2">
</div>
</div>
Вот код JS:
$(function() {
$("#link2").click(function() {
$($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim1");
$($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim2");
$($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim1");
$($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim2");
$($(this).closest('.block_disc').children("#div1")).addClass("disc_content_anim2");
$($(this).closest('.block_disc').children("#div2")).addClass("disc_content_anim1");
});
$("#link1").click(function() {
$($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim1");
$($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim2");
$($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim1");
$($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim2");
$($(this).closest('.block_disc').children("#div1")).addClass("disc_content_anim1");
$($(this).closest('.block_disc').children("#div2")).addClass("disc_content_anim2");
});
});
Мне необходимо, чтобы при клике на #link1 у блоков #div1 и #div2 появлялись классы .disc_content_anim1 и .disc_content_anim2 соответственно. А при клике на #link2 классы появились наоборот (#div1->.disc_content_anim2, #div2->.disc_content_anim1) . И вроде этот код работает (хотя, я уверен, что можно сделать проще). НО!!! Возникает проблема. Блоков div.block_disc у меня будет достаточно много. Вот и получается, что когда я начинаю блоки div.block_disc дублировать, то js срабатывает только на первом блоке, а на остальных не хочет. Уже голова кипит((( |
Rockship,
что делают ваши классы .disc_content_anim1 и .disc_content_anim2 ? и вы в курсе что id уникально? |
Открывашка 219 смена классов
:cray: :write: Открывашка 219
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.disc_content1 {
overflow: hidden;
height: 0px;
background-color: rgb(0, 255, 0);
-webkit-transition: all 0.3s ease;
/* анимация для chrome */
-moz-transition: all 0.3s ease;
/* анимация для firexox */
-o-transition: all 0.3s ease;
/* анимация для opera */
transition: all 0.3s ease;
/* анимация для остальных браузеров */
}
.disc_content2 {
overflow: hidden;
height: 0px;
background-color: rgb(255, 255, 0);
-webkit-transition: all 0.3s ease;
/* анимация для chrome */
-moz-transition: all 0.3s ease;
/* анимация для firexox */
-o-transition: all 0.3s ease;
/* анимация для opera */
transition: all 0.3s ease;
/* анимация для остальных браузеров */
}
.disc_content_anim1 {
height: 100px;
}
.disc_content_anim2 {
height: 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var s = $(".block_disc");
s.each(function(indx, el) {
var a = $("a", el),
d = $(".disc_content1, .disc_content2", el);
$(el).on("click", "a", function(event) {
event.preventDefault();
var i = a.index(this),
elem = d.eq(i),
add = elem.is(".disc_content_anim1");
d.removeClass("disc_content_anim1").addClass("disc_content_anim2");
!add && elem.removeClass("disc_content_anim2").addClass("disc_content_anim1");
});
a.first().click()
});
});
</script>
</head>
<body>
<div class="block_disc">
<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
<div class="disc_descript">
<div class="disc_link">
<a id="link1" class="disc_a" href="#">Описание</a>
</div>
<div class="disc_link top-right_radius">
<a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
</div>
</div>
<div id="div1" class="disc_content1">Описание1
</div>
<div id="div2" class="disc_content2">Треки-лист1
</div>
</div>
<div class="block_disc">
<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
<div class="disc_descript">
<div class="disc_link">
<a id="link1" class="disc_a" href="#">Описание</a>
</div>
<div class="disc_link top-right_radius">
<a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
</div>
</div>
<div id="div1" class="disc_content1">Описание2
</div>
<div id="div2" class="disc_content2">Треки-лист2
</div>
</div>
</body>
</html>
|
рониСпасибо большое!!! Про id совсем забыл ((. Да и вариант Ваш гораздо интереснее))). А эти классы просто добавляют анимацию.
Делаю девушке контрольную)) в универ, она вообще ни в зуб ногой))). Вот пришлось мне разбираться сидеть. Притом что я инженер-технолог, пишу программы для станков с ЧПУ :) :) :) |
Ещё один вопрос возник. Как сделать, что бы если один блок раскрыт,, то второй скрыт? При нажатии на вторую ссылку первый блок скрылся, а второй раскрылся. Причем когда загружаешь страницу, первый блок должен быть раскрыт?
|
Цитата:
|
Цитата:
|
Цитата:
я где-то его встречал :lol: |
Цитата:
|
| Часовой пояс GMT +3, время: 04:02. |