多次使用相同的jQuery函数(Multiple use of same jQuery function)

我正在尝试新的东西，并试图在我爬行之前跑步。 我在测试页面中使用jQuery脚本来检索和显示来自Google日历的事件。 该脚本运行良好（因为它是由其他人制作的!!）

我正在使用该脚本来过滤掉仅包含某个文本的事件，同样所有工作都会在div中显示。

然后我想在另一个div使用不同的过滤器显示不同的结果集，我只是认为我可以再次调用该函数，但是当我这样做时，结果并不总是在正确的div结束，有时会被添加到相同或上一个框。 每次刷新都会有不同的结果

结果是正确的，所以饲料工作正常，所以我认为这与文件没有准备好或者饲料延迟有关？

任何人都可以指出我正确的方向。

页面中的代码（匿名提供）：

jQuery(function ($) { $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'ladies', targetDiv:'#ladiesEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'seniors', targetDiv:'#seniorEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'open', targetDiv:'#openEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'social', targetDiv:'#socialEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'junior', targetDiv:'#juniorEvents' }); });

这是被调用的函数：

(function ($) { //Add gcal element $(document).ready(function () { $('body').prepend('<div id="loading">Loading...</div>'); }); //Resize image on ready or resize $.gCalReader = function (options) { //Default settings var settings = { //defaults?? feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 20, displayCount: 1 }; var feedUri = options.feedUri; if (feedUri.indexOf("public/full") == -1) { feedUri = settings.feedUri; } var options = $.extend(settings, options); //properties form options are combined with settings?? function _run() { var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0'); // The "public/full" feed is used to retrieve events from the named public calendar with full projection. var query = new google.gdata.calendar.CalendarEventQuery(feedUri); // Set the query with the query text query.setFullTextQuery(options.textfilter); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(options.maxresults); //alert(options.targetDiv); var callback = function (result) { var entries = result.feed.getEntries(); //clear the loading div $('#loading').html(''); if (options.displayCount) { $(options.targetDiv).append(entries.length + ' upcoming events'); } $(options.targetDiv).append('<ul id="eventlist"></ul>'); for (var i = 0; i < entries.length; i++) { var eventEntry = entries[i]; var eventTitle = eventEntry.getTitle().getText(); var startDateTime = null; var eventDate = null; var eventWhere = null; var eventContent = eventEntry.getContent().getText(); var times = eventEntry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); eventDate = startDateTime.getDate(); } var d_names = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"); var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"); var a_p = ""; var d = eventDate; var curr_hour = d.getHours(); if (curr_hour < 12) { a_p = "am"; } else { a_p = "pm"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } var curr_min = d.getMinutes(); curr_min = curr_min + ""; if (curr_min.length == 1) { curr_min = "0" + curr_min; } var time = curr_hour + ':' + curr_min + a_p; var day = eventDate.getDay(); var month = eventDate.getMonth(); var date = eventDate.getDate(); var dayname = d_names[day]; var monthname = m_names[month]; var location = eventEntry.getLocations(); var eventWhere = location[0].getValueString(); var eventhtml = '<div id="eventtitle">' + eventTitle + '</div> When: ' + dayname + ' ' + monthname + ' ' + date + ', ' + time + '<br>Where: ' + eventWhere + '<br>' + eventContent; $('#eventlist').append('<li>' + eventhtml + '</li>'); } }; // Error handler to be invoked when getEventsFeed() produces an error var handleError = function (error) { $('#gcal').html('<pre>' + error + '</pre>'); }; // Submit the request using the calendar service object calendarService.getEventsFeed(query, callback, handleError); } google.setOnLoadCallback(_run); $(window).load(function () { }); //End window load }; })(jQuery);

谢谢

更新：我可以;直到另外7个小时才回答......哈哈!!!!

发现问题 - 这一切都归结为事件列表元素的ID。

因为页面中现在有多个元素实例，我认为它会将结果转储到任何可用的实例中。

我编写了它来使每个事件列表的id唯一，现在它可以工作

尤里卡！

I'm trying something new and trying to run before I can crawl. I'm using a jQuery script in a test page that retrieves and displays events from a google calendar. The script works very well (because it was made by someone else!!)

I'm using the script to filter out events that only include a certain text, again all working and these are displayed inside a div.

I then want to display a different set of results with a different filter in another div and I simply thought I could just call the function again, however when I do this the results do not always end up in the correct div and sometimes get added to the same or previous box. Each refresh gets different results.

The results are correct so the feed is working so I assume it's something to do with document not being ready or perhaps delay in the feed?

Can anyone point me in the right direction please.

Code in page (feed anonymised):

jQuery(function ($) { $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'ladies', targetDiv:'#ladiesEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'seniors', targetDiv:'#seniorEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'open', targetDiv:'#openEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'social', targetDiv:'#socialEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'junior', targetDiv:'#juniorEvents' }); });

And here's the function being called:

(function ($) { //Add gcal element $(document).ready(function () { $('body').prepend('<div id="loading">Loading...</div>'); }); //Resize image on ready or resize $.gCalReader = function (options) { //Default settings var settings = { //defaults?? feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 20, displayCount: 1 }; var feedUri = options.feedUri; if (feedUri.indexOf("public/full") == -1) { feedUri = settings.feedUri; } var options = $.extend(settings, options); //properties form options are combined with settings?? function _run() { var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0'); // The "public/full" feed is used to retrieve events from the named public calendar with full projection. var query = new google.gdata.calendar.CalendarEventQuery(feedUri); // Set the query with the query text query.setFullTextQuery(options.textfilter); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(options.maxresults); //alert(options.targetDiv); var callback = function (result) { var entries = result.feed.getEntries(); //clear the loading div $('#loading').html(''); if (options.displayCount) { $(options.targetDiv).append(entries.length + ' upcoming events'); } $(options.targetDiv).append('<ul id="eventlist"></ul>'); for (var i = 0; i < entries.length; i++) { var eventEntry = entries[i]; var eventTitle = eventEntry.getTitle().getText(); var startDateTime = null; var eventDate = null; var eventWhere = null; var eventContent = eventEntry.getContent().getText(); var times = eventEntry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); eventDate = startDateTime.getDate(); } var d_names = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"); var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"); var a_p = ""; var d = eventDate; var curr_hour = d.getHours(); if (curr_hour < 12) { a_p = "am"; } else { a_p = "pm"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } var curr_min = d.getMinutes(); curr_min = curr_min + ""; if (curr_min.length == 1) { curr_min = "0" + curr_min; } var time = curr_hour + ':' + curr_min + a_p; var day = eventDate.getDay(); var month = eventDate.getMonth(); var date = eventDate.getDate(); var dayname = d_names[day]; var monthname = m_names[month]; var location = eventEntry.getLocations(); var eventWhere = location[0].getValueString(); var eventhtml = '<div id="eventtitle">' + eventTitle + '</div> When: ' + dayname + ' ' + monthname + ' ' + date + ', ' + time + '<br>Where: ' + eventWhere + '<br>' + eventContent; $('#eventlist').append('<li>' + eventhtml + '</li>'); } }; // Error handler to be invoked when getEventsFeed() produces an error var handleError = function (error) { $('#gcal').html('<pre>' + error + '</pre>'); }; // Submit the request using the calendar service object calendarService.getEventsFeed(query, callback, handleError); } google.setOnLoadCallback(_run); $(window).load(function () { }); //End window load }; })(jQuery);

Thanks

UPDATE: cos I can;t answer until another 7 hours... Ha ha!!!!

Found the problem - it was all down to the ID of the event list element.

Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.

I've coded it to make the id of each event list unique and now it works

Eureka!!!

最满意答案

发现问题 - 这一切都归结为事件列表元素的ID。

因为页面中现在有多个元素实例，我认为它会将结果转储到任何可用的实例中。

我编写了它来使每个事件列表的id唯一，现在它可以工作

Found the problem - it was all down to the ID of the event list element.

Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.

I've coded it to make the id of each event list unique and now it works

多次使用相同的jQuery函数(Multiple use of same jQuery function)

我正在尝试新的东西，并试图在我爬行之前跑步。 我在测试页面中使用jQuery脚本来检索和显示来自Google日历的事件。 该脚本运行良好（因为它是由其他人制作的!!）

我正在使用该脚本来过滤掉仅包含某个文本的事件，同样所有工作都会在div中显示。

然后我想在另一个div使用不同的过滤器显示不同的结果集，我只是认为我可以再次调用该函数，但是当我这样做时，结果并不总是在正确的div结束，有时会被添加到相同或上一个框。 每次刷新都会有不同的结果

结果是正确的，所以饲料工作正常，所以我认为这与文件没有准备好或者饲料延迟有关？

任何人都可以指出我正确的方向。

页面中的代码（匿名提供）：

jQuery(function ($) { $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'ladies', targetDiv:'#ladiesEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'seniors', targetDiv:'#seniorEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'open', targetDiv:'#openEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'social', targetDiv:'#socialEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'junior', targetDiv:'#juniorEvents' }); });

这是被调用的函数：

(function ($) { //Add gcal element $(document).ready(function () { $('body').prepend('<div id="loading">Loading...</div>'); }); //Resize image on ready or resize $.gCalReader = function (options) { //Default settings var settings = { //defaults?? feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 20, displayCount: 1 }; var feedUri = options.feedUri; if (feedUri.indexOf("public/full") == -1) { feedUri = settings.feedUri; } var options = $.extend(settings, options); //properties form options are combined with settings?? function _run() { var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0'); // The "public/full" feed is used to retrieve events from the named public calendar with full projection. var query = new google.gdata.calendar.CalendarEventQuery(feedUri); // Set the query with the query text query.setFullTextQuery(options.textfilter); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(options.maxresults); //alert(options.targetDiv); var callback = function (result) { var entries = result.feed.getEntries(); //clear the loading div $('#loading').html(''); if (options.displayCount) { $(options.targetDiv).append(entries.length + ' upcoming events'); } $(options.targetDiv).append('<ul id="eventlist"></ul>'); for (var i = 0; i < entries.length; i++) { var eventEntry = entries[i]; var eventTitle = eventEntry.getTitle().getText(); var startDateTime = null; var eventDate = null; var eventWhere = null; var eventContent = eventEntry.getContent().getText(); var times = eventEntry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); eventDate = startDateTime.getDate(); } var d_names = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"); var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"); var a_p = ""; var d = eventDate; var curr_hour = d.getHours(); if (curr_hour < 12) { a_p = "am"; } else { a_p = "pm"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } var curr_min = d.getMinutes(); curr_min = curr_min + ""; if (curr_min.length == 1) { curr_min = "0" + curr_min; } var time = curr_hour + ':' + curr_min + a_p; var day = eventDate.getDay(); var month = eventDate.getMonth(); var date = eventDate.getDate(); var dayname = d_names[day]; var monthname = m_names[month]; var location = eventEntry.getLocations(); var eventWhere = location[0].getValueString(); var eventhtml = '<div id="eventtitle">' + eventTitle + '</div> When: ' + dayname + ' ' + monthname + ' ' + date + ', ' + time + '<br>Where: ' + eventWhere + '<br>' + eventContent; $('#eventlist').append('<li>' + eventhtml + '</li>'); } }; // Error handler to be invoked when getEventsFeed() produces an error var handleError = function (error) { $('#gcal').html('<pre>' + error + '</pre>'); }; // Submit the request using the calendar service object calendarService.getEventsFeed(query, callback, handleError); } google.setOnLoadCallback(_run); $(window).load(function () { }); //End window load }; })(jQuery);

谢谢

更新：我可以;直到另外7个小时才回答......哈哈!!!!

发现问题 - 这一切都归结为事件列表元素的ID。

因为页面中现在有多个元素实例，我认为它会将结果转储到任何可用的实例中。

我编写了它来使每个事件列表的id唯一，现在它可以工作

尤里卡！

I'm trying something new and trying to run before I can crawl. I'm using a jQuery script in a test page that retrieves and displays events from a google calendar. The script works very well (because it was made by someone else!!)

I'm using the script to filter out events that only include a certain text, again all working and these are displayed inside a div.

I then want to display a different set of results with a different filter in another div and I simply thought I could just call the function again, however when I do this the results do not always end up in the correct div and sometimes get added to the same or previous box. Each refresh gets different results.

The results are correct so the feed is working so I assume it's something to do with document not being ready or perhaps delay in the feed?

Can anyone point me in the right direction please.

Code in page (feed anonymised):

jQuery(function ($) { $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'ladies', targetDiv:'#ladiesEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'seniors', targetDiv:'#seniorEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'open', targetDiv:'#openEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'social', targetDiv:'#socialEvents' }); $.gCalReader({ feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 4, textfilter: 'junior', targetDiv:'#juniorEvents' }); });

And here's the function being called:

(function ($) { //Add gcal element $(document).ready(function () { $('body').prepend('<div id="loading">Loading...</div>'); }); //Resize image on ready or resize $.gCalReader = function (options) { //Default settings var settings = { //defaults?? feedUri: 'https://www.google.com/calendar/feeds/abc@group.calendar.google.com/public/full', maxresults: 20, displayCount: 1 }; var feedUri = options.feedUri; if (feedUri.indexOf("public/full") == -1) { feedUri = settings.feedUri; } var options = $.extend(settings, options); //properties form options are combined with settings?? function _run() { var calendarService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0'); // The "public/full" feed is used to retrieve events from the named public calendar with full projection. var query = new google.gdata.calendar.CalendarEventQuery(feedUri); // Set the query with the query text query.setFullTextQuery(options.textfilter); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(options.maxresults); //alert(options.targetDiv); var callback = function (result) { var entries = result.feed.getEntries(); //clear the loading div $('#loading').html(''); if (options.displayCount) { $(options.targetDiv).append(entries.length + ' upcoming events'); } $(options.targetDiv).append('<ul id="eventlist"></ul>'); for (var i = 0; i < entries.length; i++) { var eventEntry = entries[i]; var eventTitle = eventEntry.getTitle().getText(); var startDateTime = null; var eventDate = null; var eventWhere = null; var eventContent = eventEntry.getContent().getText(); var times = eventEntry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); eventDate = startDateTime.getDate(); } var d_names = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"); var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"); var a_p = ""; var d = eventDate; var curr_hour = d.getHours(); if (curr_hour < 12) { a_p = "am"; } else { a_p = "pm"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } var curr_min = d.getMinutes(); curr_min = curr_min + ""; if (curr_min.length == 1) { curr_min = "0" + curr_min; } var time = curr_hour + ':' + curr_min + a_p; var day = eventDate.getDay(); var month = eventDate.getMonth(); var date = eventDate.getDate(); var dayname = d_names[day]; var monthname = m_names[month]; var location = eventEntry.getLocations(); var eventWhere = location[0].getValueString(); var eventhtml = '<div id="eventtitle">' + eventTitle + '</div> When: ' + dayname + ' ' + monthname + ' ' + date + ', ' + time + '<br>Where: ' + eventWhere + '<br>' + eventContent; $('#eventlist').append('<li>' + eventhtml + '</li>'); } }; // Error handler to be invoked when getEventsFeed() produces an error var handleError = function (error) { $('#gcal').html('<pre>' + error + '</pre>'); }; // Submit the request using the calendar service object calendarService.getEventsFeed(query, callback, handleError); } google.setOnLoadCallback(_run); $(window).load(function () { }); //End window load }; })(jQuery);

Thanks

UPDATE: cos I can;t answer until another 7 hours... Ha ha!!!!

Found the problem - it was all down to the ID of the event list element.

Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.

I've coded it to make the id of each event list unique and now it works

Eureka!!!

最满意答案

发现问题 - 这一切都归结为事件列表元素的ID。

因为页面中现在有多个元素实例，我认为它会将结果转储到任何可用的实例中。

我编写了它来使每个事件列表的id唯一，现在它可以工作

Found the problem - it was all down to the ID of the event list element.

Because there were now multiple instances of the element within the page I assume it was dumping the results in any that was available.

I've coded it to make the id of each event list unique and now it works