Question

我正在尝试创建演讲台，其高度由其开始和结束时间确定。我这样做是通过从结束时间减去开始时间，然后将其划分为15分钟的间隔，再乘以50px。我想知道是否可以将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>
  <% } %>

Answer 1

您编写的代码试图分配高度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中的每个对象都必须具有唯一的ID。如果您无法正常工作，请告诉我您遇到了什么错误。希望这可以帮助！

如何在ejs中将div样式属性定义为函数？

1 个答案: