Javascript jQuery与AJAX:多输出
我已经创建了一个jQuery插件,它获取一个JSON提要(在本例中是YouTube)。然后将结果显示在DIV中-一切正常,直到:我想在两个或多个容器中显示结果(使用不同的设置:即更多视频、其他频道)-我如何实现这一点 顺便说一句。。。这是我问题的正确标题吗?到目前为止,我还不是jQuery/JS专家:) 以下是我迄今为止的代码-我将其缩短为基本操作和基本输出:Javascript jQuery与AJAX:多输出,javascript,jquery,ajax,plugins,Javascript,Jquery,Ajax,Plugins,我已经创建了一个jQuery插件,它获取一个JSON提要(在本例中是YouTube)。然后将结果显示在DIV中-一切正常,直到:我想在两个或多个容器中显示结果(使用不同的设置:即更多视频、其他频道)-我如何实现这一点 顺便说一句。。。这是我问题的正确标题吗?到目前为止,我还不是jQuery/JS专家:) 以下是我迄今为止的代码-我将其缩短为基本操作和基本输出: (function($){ // Default settings var settings = { a
(function($){
// Default settings
var settings = {
author: 'ARD',
results: 3
};
// Append to Container
var append_to_container;
// The Methods
var methods = {
// Initate
init: function(options){
append_to_container = $(this);
$.extend(settings, options);
methods.grabFeed();
},
// Grab feed
grabFeed: function(){
$.ajax({
url: 'http://gdata.youtube.com/feeds/api/videos',
data: {
author: settings.author,
v: '2',
alt: 'jsonc',
'max-results': settings.results
},
dataType: 'jsonp',
success: function(data){
methods.gotResults(data);
}
});
},
// Placeholder for results
gotResults: function(data){
console.log(data);
$("<h1>Success!</h1>").appendTo(append_to_container);
}
};
$.fn.youtubeVideos = function(method){
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.youtubeVideos' );
}
}
})(jQuery);
它显示了的成功消息在第二次调用中使用的容器中出现两次
我尝试了stackoveflow和web的几个答案,但我找不到一种方法可以多次使用我的功能如何在多个容器上多次使用插件?
编辑/解决方案 下面是我在Codemonkey提示后的解决方案:
(function($){
$.fn.youtubeVideos = function(method){
// Default settings
var settings = {
author: 'ARD',
results: 3
};
// Append to Container
var append_to_container;
// The Methods
var methods = {
// Initate
init: function(options){
append_to_container = $(this);
$.extend(settings, options);
methods.grabFeed();
},
// Grab feed
grabFeed: function(){
$.ajax({
url: 'http://gdata.youtube.com/feeds/api/videos',
data: {
author: settings.author,
v: '2',
alt: 'jsonc',
'max-results': settings.results
},
dataType: 'jsonp',
success: function(data){
methods.gotResults(data);
}
});
},
// Placeholder for results
gotResults: function(data){
console.log(data);
$("<h1>Success!</h1>").appendTo(append_to_container);
}
};
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.youtubeVideos' );
}
}
})(jQuery);
$('#main').youtubeVideos();
$('#same_videos').youtubeVideos();
(函数($){
$.fn.youtubeVideos=函数(方法){
//默认设置
变量设置={
作者:“ARD”,
结果:3
};
//附加到容器
var将_附加到_容器;
//方法
var方法={
//发起
初始化:函数(选项){
将_附加到_容器=$(此);
$.extend(设置、选项);
方法:grabFeed();
},
//抓取饲料
grabFeed:function(){
$.ajax({
网址:'http://gdata.youtube.com/feeds/api/videos',
数据:{
作者:settings.author,
v:‘2’,
alt:'jsonc',
“最大结果”:settings.results
},
数据类型:“jsonp”,
成功:功能(数据){
方法:结果(数据);
}
});
},
//结果占位符
结果:函数(数据){
控制台日志(数据);
$(“Success!”).appendTo(将\u附加到\u容器);
}
};
//方法调用逻辑
if(方法[方法]){
返回方法[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof方法=='object'| |!方法){
return methods.init.apply(这是参数);
}否则{
$.error('Method'+Method+'在jQuery.youtubeVideos上不存在);
}
}
})(jQuery);
$('#main').youtubeVideos();
$(“#相同的视频”).youtubeVideos();
将所有功能放入:
$.fn.youtubeVideos = function(method){ ...
就这样。每次运行插件函数时,该函数的上下文都是唯一的。如果需要通过多次调用插件函数将数据持久保存在jQuery对象中,请使用。除此之外,你可以走了
您应该查看一些jQuery插件示例(),看看它们是如何工作的。所以没有办法将封装的方法保留在主函数之外?这对结构没有好处:/这不是不可能的,但肯定是最简单的方法。我不明白为什么这是个问题。将
grabbeed:function(){…
简单地重写为function grabbeed(){…
甚至var grabbeed=function(){…
并将它们移动到您的插件函数中。如果需要,您甚至可以将整个methods对象移动到插件函数中。这意味着您必须使用一个额外的indentarghs-got'ya:)只需再试一次!谢谢!猴子最终总能得到它!
$.fn.youtubeVideos = function(method){ ...