jQuery 5 秒后动态更改完整日历 div

Question

我在jQuery中有以下代码。有 3 个日历（jQuery fullCalendar），我想在 5 秒后一个一个地更改这些日历。在设定的时间间隔内，我尝试了一些技巧，但它们没有用。

日历 1、日历 2、日历 3 是我的 google 帐户中的 3 个。我想在 5 秒后一一显示。表示显示日历 1，隐藏其他 2。5 秒后显示日历 2，依此类推...

  <!DOCTYPE html>
     <html>
     <head>
     <meta charset='utf-8' />
     <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
     <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
     <script src='../lib/moment.min.js'></script>
     <script src='../lib/jquery.min.js'></script>
     <script src='../fullcalendar/fullcalendar.min.js'></script>
     <script type='text/javascript' src='gcal.js'></script>

 <script> 

   setInterval(function(){
       }, 5000)


    $(document).ready(function() {
      $('‪#‎calendar1‬').fullCalendar({
          googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
             events: {
              googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
             }
      });
      $('‪#‎calendar2‬').fullCalendar({
          googleCalendarApiKey: 'xxxxxxxxxxxxxxxxx',
             events: {
                googleCalendarId: 'xxxxxxxxxxxxxxxx'
              }
       });
       $('‪#‎calendar3‬').fullCalendar({
          googleCalendarApiKey: 'xxxxxxxxxxxxxxx',
             events: {
                googleCalendarId: 'xxxxxxxxxxxxxxx'
             }
          });
    });
    </script>
   <style>
    body {
      margin: 40px 10px;
      padding: 0;
     }
     #calendar1 {
       max-width: 900px;
       margin: 0 auto;
     }
     #calendar2 {
        max-width: 900px;
        margin: 0 auto;
        display:none;
      }
      #calendar3 {
        max-width: 900px;
        margin: 0 auto;
        display:none;
       }

     </style>
     </head>
     <body>
      <div id='calendar1'></div>
      <div id='calendar2'></div>
      <div id='calendar3'></div>
     </body>
    </html>

Answer 1

我想你正在寻找将其设置为数组中的 ids 并以间隔 5000

传递给每个函数

$.each([calender1, calender2, calender3] , function (index, value) {

setInterval(function(){   (value).fullCalendar({ googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx', events: { googleCalendarId: 'xxxxxxxxxxxxxxxxxxx' } });  null}, 5000);
 )};

Answer 2

您需要在 setInterval 中使用 show() 和 jquery 的 hide() 并且您需要使用 global 变量 calenderNo 存储当前显示的日历，每 5 秒增加一次，当它变为 4 时返回值 1。

 <!DOCTYPE html>
             <html>
             <head>
             <meta charset='utf-8' />
             <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
             <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
             <script src='../lib/moment.min.js'></script>
             <script src='../lib/jquery.min.js'></script>
             <script src='../fullcalendar/fullcalendar.min.js'></script>
             <script type='text/javascript' src='gcal.js'></script>

         <script> 
        var calenderNo=1;
            $(document).ready(function() {
              $('‪#‎calendar1‬').fullCalendar({
                  googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
                     events: {
                      googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
                     }
              });
              $('‪#‎calendar2‬').fullCalendar({
                  googleCalendarApiKey: 'xxxxxxxxxxxxxxxxx',
                     events: {
                        googleCalendarId: 'xxxxxxxxxxxxxxxx'
                      }
               });
               $('‪#‎calendar3‬').fullCalendar({
                  googleCalendarApiKey: 'xxxxxxxxxxxxxxx',
                     events: {
                        googleCalendarId: 'xxxxxxxxxxxxxxx'
                     }
                  });
         setInterval(function(){
              $('#calendar'+calenderNo++).hide();
              if(calenderNo==4)
    calenderNo=1;
    $('#calendar'+calenderNo).show();

            });
            </script>
           <style>
            body {
              margin: 40px 10px;
              padding: 0;
             }
             #calendar1 {
               max-width: 900px;
               margin: 0 auto;
             }
             #calendar2 {
                max-width: 900px;
                margin: 0 auto;
                display:none;
              }
              #calendar3 {
                max-width: 900px;
                margin: 0 auto;
                display:none;
               }

             </style>
             </head>
             <body>
              <div id='calendar1'></div>
              <div id='calendar2'></div>
              <div id='calendar3'></div>
             </body>
            </html>

Answer 3

通过将您的日历放入一个对象中，您可以像这样在间隔函数中调用它：http://jsfiddle.net/es7cdL62/2/

var numberOfCals = 3;

var calNumber = 0;

var fullCalendar = {
    calendar0: {
        googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
        events: {
            googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
        }
    },
    calendar1: {
        googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
        events: {
            googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
        }
    },
    calendar2: {
        googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
        events: {
            googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
        }
    }
}

setInterval(function () {

    $("#cal").html("");

    $("#cal").fullCalendar(fullCalendar["calendar"+calNumber]);

    calNumber = (calNumber + 1) % numberOfCals;

}, 5000);

而您在 html 中所要做的就是

<div id="cal"></div>

jQuery 5 秒后动态更改完整日历 div

jQuery dynamically change Full Calendar div after 5 seconds

html

ajax

jquery

fullcalendar