Question

我已将对象数组发送到前端，我希望它每5分钟左右在索引0和1（uniTimes [0] <-> uniTimes [1]）之间切换显示的数据。我该如何做到这一点，难道只能通过使用外部框架（如React / Angular）来实现吗？

**//Array**

  var uniTimes = [
    {
      lectures: [
        {
          title: "Information System Security",
          classroom: "503a.",
          start: "1995-12-17T08:00:00",
          end: "1995-12-17T09:15:00"
        },
        {
          title: "Project Management",
          classroom: "117a.",
          start: "1995-12-17T08:30:00",
          end: "1995-12-17T09:30:00"
        },
        {
          title: "Audiovisual Art",
          classroom: "228a.",
          start: "1995-12-17T09:45:00",
          end: "1995-12-17T12:00:00"
        } 
      ]
    },
    {
      labs: [
        {
          title: "Graphic Design",
          classroom: "505a.",
          start: "1995-12-17T09:15:00",
          end: "1995-12-17T10:15:00"
        },
        {
          title: "Special Effects",
          classroom: "228a.",
          start: "1995-12-17T11:30:00",
          end: "1995-12-17T12:00:00"
        },
        {
          title: "Robotics",
          classroom: "513a.",
          start: "1995-12-17T08:45:00",
          end: "1995-12-17T09:30:00"
        }
      ]
    }
  ]

**//Render code**

res.render('index', { uniTimes: uniTimes});

**//EJS Code**

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

Answer 1

如果您只想在labs和lectures之间切换可见性，则可以使用原始javascript来实现。不需要Angular或React。使用setInterval()
为每个条目创建2 div并切换其可见性。

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

<div id="labs" style="display:none">
<% for(var i = 0; i < uniTimes[0].labs.length; i++) { %>
    <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].labs[i].title %></h3>
        <h3><%= uniTimes[0].labs[i].classroom %></h3>
        <h3><%= uniTimes[0].labs[i].start %></h3>
        <h3><%= uniTimes[0].labs[i].end %></h3>
    </div>
<% } %>
</div>


<script type="text/javascript">
    var lectures = document.getElementById("lectures");
    var labs = document.getElementById("labs");
    setInterval(function() {
        if (lectures.style.display === 'none') {
          lectures.style.display = 'block';
          labs.style.display = 'none';
        } else {
            lectures.style.display = 'none';
            labs.style.display = 'block';
        }

    }, 5 * 60000);
</script>

下面是一个示例，该示例每2秒切换一次数据。

var lectures = document.getElementById("lectures");
var labs = document.getElementById("labs");
setInterval(function() {
    if (lectures.style.display === 'none') {
      lectures.style.display = 'block';
      labs.style.display = 'none';
    } else {
    	lectures.style.display = 'none';
    	labs.style.display = 'block';
    }
    
}, 2000);

<div id="lectures">
  <h2>
    lectures
  </h2>
</div>
<div id="labs" style="display:none">
  <h2>
    labs
  </h2>
</div>

Answer 2

渲染后，您将失去服务器端更改已发送给用户的数据的任何能力，因此您要么需要使用某种可以使用socket.io来保持与用户的连接的东西，要么需要类似的东西，或者发送所有数据需要并使用客户端代码对其进行更改

如何在ejs中获取的数据的索引之间切换？

2 个答案: