Как определить свойство стиля div как функцию в ejs? - PullRequest
Новая
       14

Как определить свойство стиля div как функцию в ejs?

0 голосов
/ 10 мая 2019

Я пытаюсь создать лекционные блоки, высота которых определяется их временем начала и окончания.Я делаю это, вычитая время начала из времени окончания, затем делю его на 15-минутные интервалы и умножаю их на 50 пикселей.Мне было интересно, можно ли мне определить свойство стиля div height как функцию, которая вычисляет высоту каждого блока? 

**// EJS Code**

<div id="mit_1-1" style="float: left">
  <% for(n=0; n<times[0].lectures.monday.length; n++){ %>
    <div style="width: 150px; margin-right: 25px; background-color: red;">
      <h3><%= times[0].lectures.monday[n].title %></h3>
      <h3><%= times[0].lectures.monday[n].classroom %></h3>
      <h3><%= times[0].lectures.monday[n].start %></h3>
      <h3><%= times[0].lectures.monday[n].end %></h3>
    </div>
  <% } %>

**Script to calculate the block height**

<script>
  function getLectureBlockHeight(el){
    var result = ((new Date(el[0].end) - new Date(el[0].start))/1000)/60; // get lecture's length in minutes
    result = (result / 15) * 50; // get amount of 15 minutes intervals and multiply by 50
    return result;
  }
</script>

**// This is how I was hoping to make it work**

<div id="mit_1-1" style="float: left">
  <% for(n=0; n<times[0].lectures.monday.length; n++){ %>
    <div style="height: getLectureBlockHeight(times[0].lectures.monday[n]) + px; width: 150px; margin-right: 25px; background-color: red;">
      <h3><%= times[0].lectures.monday[n].title %></h3>
      <h3><%= times[0].lectures.monday[n].classroom %></h3>
      <h3><%= times[0].lectures.monday[n].start %></h3>
      <h3><%= times[0].lectures.monday[n].end %></h3>
    </div>
  <% } %>

1 Ответ

0 голосов
/ 11 мая 2019

Код, который вы написали, пытается присвоить высоту getLectureBlockHeight(times[0].lectures.monday[n]) + px;, что не имеет смысла и, вероятно, вызывает ошибку в консоли браузера.

Если вы можете вычислить желаемую высоту на своемсервер, я бы порекомендовал сохранить это значение в переменной, а затем использовать следующий код: 

<div style="height:'<%= div_height %>px'; width: 150px; margin-right: 25px; background-color: red;">

Если вам нужно для расчета высоты с помощью JS на стороне клиента, то вам придетсявставьте значение с помощью jQuery. 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> //you always need this for jQuery to work!  Remember to put this before using any jQuery code

<script>
  function getLectureBlockHeight(el){
    var result = ((new Date(el[0].end) - new Date(el[0].start))/1000)/60;
    result = (result / 15) * 50;
    return result;
  }
</script>

 <% for(n=0; n<times[0].lectures.monday.length; n++){ %>
 <div id="<%= times[0].lectures.monday[n].someUniqueId %>" style="width: 150px; margin-right: 25px; background-color: red;">
  <h3><%= times[0].lectures.monday[n].title %></h3>
  <h3><%= times[0].lectures.monday[n].classroom %></h3>
  <h3><%= times[0].lectures.monday[n].start %></h3>
  <h3><%= times[0].lectures.monday[n].end %></h3>
</div>

<script>
  $('#<%=times[0].lectures.monday[n].someUniqueId%>').css(
      {width:getLectureBlockHeight(<%= times[0].lectures.monday[n] %>).toString() + 'px'}
  )
</script>
<% } %>

Обратите внимание, что вам нужно будет иметь уникальный идентификатор для каждого объекта в times.Если вы не можете заставить это работать, дайте мне знать, какие ошибки вы получаете.Надеюсь это поможет!

...