1

Всем доброго времени суток. Есть такая разметка

<div class="pans-room">
  <div class="table">
    <div class="head">Название группы</div>
    <div class="row capt">
      <div>Тип товара</div>
      <div>Стоимость</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
  </div>
  <div class="complect">
    <h3>Описание</h3>
    <div class="complects">
      <div class="open">Скрытый текст</div>
      <div class="open">Скрытый текст</div>
      <div class="open">Скрытый текст</div>

    </div>
  </div>
</div>

как сделать так что бы при клике на div с классом "click" открывался div с классом "open"? Соответственно должна соблюдаться очередность, т.е. кликнули по первому div "click" открылся первый div "open" кликнули по второму - первый закрылся второй открылся и т.д. Количество div не ограничено их может быть 3, а может 100. И самих блоков с дивом "pans-room" тоже может быть несколько, все это формируется динамически с помощью php. Для меня вся сложность как раз оказалась в том что заранее не известно количество дивов, может кто знает как такое можно реализовать?

2
  • Надо добавлять идентификаторы. Как определить второй див?
    – DNS
    19 апр 2017 в 16:32
  • не представляю как добавить индетификаторы, т.к. все это формируется с помощью php (динамически) как цикл
    – user242682
    19 апр 2017 в 16:40

1 ответ 1

2

var $set = $('.table .click');
$('.table').on('click', '.click', function() {
  var n = $set.index(this);
  $('.complects .open').removeClass('active')
  $('.complects .open:eq(' + n + ')').addClass('active');
});
.click {
  border: 1px solid black;
}

.open {
  display: none;
  border: 2px solid red;
}

.open.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pans-room">
  <div class="table">
    <div class="head">Название группы</div>
    <div class="row capt">
      <div>Тип товара</div>
      <div>Стоимость</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
    <div class="row">
      <div class="click">Товар</div>
      <div>Цена</div>
    </div>
  </div>
  <div class="complect">
    <h3>Описание</h3>
    <div class="complects">
      <div class="open">1</div>
      <div class="open">2</div>
      <div class="open">3</div>

    </div>
  </div>

</div>

1
  • можно еще вопрос, а как сделать что бы если блоков "pans-room" несколько, то при нажатии на click не происходил removeClass 'active' в соседних блоках, сейчас получается что если нажать на click то removeClass будет абсолютно для всех элементов, не зависимо от принадлежности разным блокам, такое возможно?
    – user242682
    19 апр 2017 в 17:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.