Форум

Aruta · #1 (**permalink**) 24.02.2020, 11:30

Добрый день!
Подскажите, пожалуйста, как сделать чтобы при нажатии на блок отображались только нужные блоки, которые находятся выше по 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();		
							} 
					})
					})

laimas · #2 (**permalink**) 24.02.2020, 11:46

e.preventDefault(); - лишнее здесь.
var nS = $(this).parent().parent().parent().parent().parent ().parent(); - заменить на closest(selector).

Можно просто по индексу работать?

рони · #3 (**permalink**) 24.02.2020, 12:21

Сообщение от Aruta

dispaly

Aruta · #4 (**permalink**) 24.02.2020, 12:37

laimas,
Нельзя по индексу. Так бы через ссылки сделал
closest(selector) не работает в моем случае, поэтому пришлось через parent().parent() делать

Aruta · #5 (**permalink**) 24.02.2020, 12:38

рони,
опечатка

но она только в тз попала сюда

laimas · #6 (**permalink**) 24.02.2020, 12:42

Сообщение от Aruta

Нельзя по индексу.

Это почему, если у вас один набор управляет вторым набором с тем же количеством элементов?

Сообщение от Aruta

closest(selector) не работает в моем случае

Что-то вы не то делаете значит.

рони · #7 (**permalink**) 24.02.2020, 12:56

Сообщение от Aruta

Нельзя по индексу

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .inner-2-1-1 {
      display: none;
  }
  .inner-2-1-1.act {
      display:  block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(document).on('click','.next',function(e){
var index = $('.next').index(this);
$('.wrapper-1').show();
$('.inner-top-1-1').hide().eq(index++).show()
$('.inner-2-1-1').hide().eq(index).show()

})
$(document).on('click','.back',function(e){
var index = $('.back').index(this) ;
$('.wrapper-1').toggle(index > 0); 
$('.inner-2-1-1').hide().eq(index--).show();
$('.inner-top-1-1').hide().eq(index).show();
})

});
  </script>
</head>
<body>

     <div class="wrapper-1" style="display:none"> wrapper-1
          <div class="inner-top-1-1" style="display:none">1</div>
          <div class="inner-top-1-1" style="display:none">2</div>
          <div class="inner-top-1-1" style="display:none">3</div>
          <div class="inner-top-1-1" style="dispaly:none">4</div>
     </div>
            <div class="inner-2-1-1 act">
              <div>
                 <div class="next">next 1</div>
               </div>
            </div>
            <div class="inner-2-1-1">
              <div>
                 <div class="back">back 0</div>
                 <div class="next">next  2</div>
               </div>
            </div>
            <div class="inner-2-1-1">
              <div>
                 <div class="back">back 1</div>
                 <div class="next">next  3</div>
               </div>
            </div>
             <div class="inner-2-1-1">
              <div>
                 <div class="back">back 2</div>
                 <div class="next">next  4</div>
               </div>
            </div>
            <div class="inner-2-1-1">
               <div>
                 <div class="back">back 3</div>
               </div>
             </div>
</body>
</html>

Aruta · #8 (**permalink**) 24.02.2020, 13:39

рони,
ты - волшебник

Я 3 дня голову ломаю, 7+ вариантов перепробовал (это только глобальных, а не правки по мелочам), в сумме наверное 500 строк кода написал, а в итоге всего 5 надо

Подскажи еще, пожалуйста, как закодить кнопку "назад", чтобы в обратную сторону работало

рони · #9 (**permalink**) 24.02.2020, 14:02

Сообщение от Aruta

как закодить кнопку "назад",

смотрите пост #7 снова.

Aruta · #10 (**permalink**) 24.02.2020, 14:25

рони,
СПАСИБО!!!!!

Форум

Справочник

Discord чат

Курсы javascript