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

我在jQuery中有以下代码。有3个日历（jQuery fullCalendar），我想在5秒后逐一更改这些日历。在设定的时间间隔中，我尝试了一些技巧，但他们没有工作。jQuery在5秒后动态更改完整日历div

日历1，日历2，日历3是我的谷歌账户中的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>

来源

2015-07-03 sunny93

什么你正在谈论的改变？ –

日历1，日历2，日历3是我的谷歌账户中的3个。我想在5秒后逐一显示它们。意味着显示日历1，隐藏其他2. 5秒后显示日历2等等...... – sunny93

@MehmoodMemon请编辑您的问题，以便您在此处添加的此澄清（在注释中）可以直接在您的身体内找到题。 –

把你的日历导入一个对象，你可以把它在区间功能是这样的：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>

来源

2015-07-05 15:59:07 Dmitri

谢谢@Dmitri – sunny93

没问题@MehmoodMemon – Dmitri

我认为你正在寻找设置它的ID在阵列，并传递给每一个功能与间隔5000

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

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

来源

2015-07-03 15:37:07

当我复制你的代码时，它包含错误。请检查并编辑。 – sunny93

您需要使用show()和jQuery的hide()的setInterval内，你需要使用一个全球变量calenderNo存储当前显示的日历，这将增加我当它变成四时，n每5秒返回一个值。

<!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>

来源

2015-07-05 14:21:48

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

回答

相关问题