Frontend задача, как лучше подойти к ее решению?

213

16 апреля 2017, 01:03

Аналог фичи, которую я хочу сделать - https://multiplex.ua/cinema/victoriaplaza. Это зал, когда выбираешь сеанс, хочу примерно такое же, но мне надо сверстать 4 зала разных, не рисовать же их дивами? Хотел узнать у про, как правильно такое делать, ибо я буду использовать jquery и рисовать блоками 150 мест...., что не слишком разумно, подскажите плис

Answer 1

Ну как в комментах пишут, в чем проблема рисовать дивами к примеру:

Делаешь div зала:

 <div class='hall'></div>

Описываешь в css стили для .hall - это у нас сам зал и .hall__place - место в зале

Затем на jQuery к примеру делаешь след код:

 // функция для генерации мест
 function generateHall(places) {
      // places - кол-во мест в зале
      var $hall = $('.hall');
      $hall.empty();
      for (var i=0; i<places; i++ ) {
         $hall.append('<div class="hall_place">'+i+'</div>'); 
      }
 }

 $(function() {
      generateHall(150); // генерация мест, можешь использовать где угодно
      // обработчик события клик
      $('body').on('click', '.hall_place', function() {
           var $this = $(this),
               num_place = $this.text(); // можно через атрибуты и т.п.
           // так же тут уже можно прописать применение стилей при клике и т.п.
      }) 
 })