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

回答

相關問題