Показать сообщение отдельно
  #1 (permalink)  
Старый 24.02.2020, 11:30
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

Показ/скрытие элемента
Добрый день!
Подскажите, пожалуйста, как сделать чтобы при нажатии на блок отображались только нужные блоки, которые находятся выше по DOM-дереву.

Задача:
При первом нажатии class="next" должно:
- class="wrapper-1" стать display: block
- скрыться class="inner-2-1-1" и показаться class="inner-2-1-2" и class="inner-top-1-1".

При втором и далее нажатиях должно происходить также всё - пошагово отображая соответствующие следующие блоки и когда доходит до последнего class="inner-2-1-n" то последующий class="inner-top-1-m" должен скрываться.

В итоге получается, например, у нас class="inner-2-1-1" - 10 блоков, а class="inner-top-1-1" на 2 меньше всегда.

Если многого хочу, то можно сделать с костылем - class="inner-top-1-1" на 1 блок меньше

Структура:
<div>
     <div class="wrapper-1" style="dispaly:none">
          <div class="inner-top-1-1" style="display:none"></div>
          <div class="inner-top-1-1" style="display:none"></div>
          <div class="inner-top-1-1" style="display:none"></div>
          ..............................................................................
          <div class="inner-top-1-1" style="display:none"></div>
     <div class="wrapper-2">
       <div class="inner-2">
          <div class="inner-2-1">
            <div class="inner-2-1-1">
              <div>
                 <div class="back"></div>
                 <div class="next"></div>
               </div>
            </div>
            <div class="inner-2-1-1">
              <div>
                 <div class="back"></div>
                 <div class="next"></div>
               </div>
            </div>
             .........................................
            <div class="inner-2-1-1">
               <div>
                 <div class="back"></div>
               </div>         
             </div>


$(document).on('click','.next',function(e){    //клик на кнопку "далее"
							e.preventDefault();
							var nS = $(this).parent().parent().parent().parent().parent().parent();   //выделяем родителя кнопки, который надо скрыть/показать
								$('.wrapper-1').show();	 //показывает нужный блок-обертку
								nS.hide();
								nS.next().show();
								var nAs = $('.inner-top-1-1'); //блок, который нужно показать
								if (nAs.css('display')==='block'){
								nAs.hide();
								nAs.next().show();		
							} 
					})
					})

Последний раз редактировалось Aruta, 24.02.2020 в 12:42.
Ответить с цитированием