Здравствуйте, есть такая архитектура)
Код:
|
<div class="plan">
<button class="g-btn g-btn-active plan__btn plan__btn-1" data-src="01.jpg" data-floor="1">
<span class="g-btn-dots">1</span></button>
<button class="g-btn plan__btn plan__btn-2" data-src="02.jpg" data-floor="1">
<span class="g-btn-dots">2</span></button>
<button class="g-btn plan__btn plan__btn-3" data-src="03.jpg" data-floor="1">
<span class="g-btn-dots">3</span></button>
<div class="plan__content">
<img class="plan__img" src="pic.jpg" />
<div class="plan__search plan__search-floor plan__search-1" data-floor="1"></div>
<div class="plan__search plan__search-floor plan__search-1" data-floor="2"></div>
<div class="plan__search plan__search-floor plan__search-1" data-floor="3"></div>
</div>
</div> |
и к ней такой вот скрипт:
Код:
|
$(".plan__btn").click(function() {
$(".plan__img").attr("src", $(this).data("src"));
$(".plan__btn").removeClass("g-btn-active");
$(".plan__search").removeClass("hidden").addClass("hidden");
$(".plan__search-floor" + $(this).data("floor")).removeClass("hidden");
$(this).addClass("g-btn-active")
}); |
Как видите тут три кнопки и у каждой кнопки свой div. Помимо этого меняется картинка plan__img - успешно, переключается класс active у кнопок - успешно, и должны скрываться дивы у неактивных кнопок по умолчанию, при клике на другую кнопку - её див отображается а другие скрываются и так далее, вот именно с этим у меня проблемы. Подскажите пожалуйста, где я ошибся в переключении активных дивов?