当我在tab1中点击加载更多时，图像会显示出来。当我选择另一个标签时，它不会清除上一个标签中的图像。有人可以帮我解决这个问题吗？我将不胜感激。感谢。
$(document).ready(function() {
tabs();
instafeed();
});
function tabs() {
$(".tab-content").hide();
$(".tab-content:first").show();
$("div.tabs .button").click(function() {
$("div.tabs .button").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
}
function instafeed() {
var myButton = $('#load-more');
var tab1 = new Instafeed({
target: 'tab1',
get: 'tagged',
tagName: 'cofiwear',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '14',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
after: function() {
if (!this.hasNext()) {
myButton.hide();
}
},
resolution: 'standard_resolution',
after : function() { console.log('a'); }
});
// call feed.next() on button click
$('#mybutton').on('click', function() {
tab1.next();
});
tab1.run();
var tab2 = new Instafeed({
target: 'tab2',
get: 'tagged',
tagName: 'cofiwear',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '14',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
after: function() {
if (!this.hasNext()) {
myButton.hide();
}
},
resolution: 'standard_resolution',
after : function() { console.log('a'); }
});
// call feed.next() on button click
$('#mybutton').on('click', function() {
tab2.next();
});
tab2.run();
myButton.on('click', function() {
// run feeds
tab1.next();
tab2.next();
});
}img {
width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
// Generated by CoffeeScript 1.3.3
(function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"most-recent",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="most-recent"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),f.src=s.images[this.options.resolution].url,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this);
</script>
<section class="container-wrap" id="community">
<div class="tabs">
<button class="button active" rel="tab1">#tab1</button>
<button class="button" rel="tab2">#tab2</button>
</div>
<div id="tab-container">
<div class="tab-content instafeed" id="tab1"></div>
<div class="tab-content instafeed" id="tab2"></div>
</div>
<button class="btn-wrap" id="load-more" href="#">
<div class="btn">load more</div>
</button>
</section>
我的代码在jsfiddle
答案 0 :(得分：1)
这可以改善很多！ 无论如何它现在已修复，只需使用不同的clientId进行测试。
$(function(){
var myButton = $('#load-more');
var tab1 = new Instafeed({
target: 'tab1',
get: 'tagged',
tagName: 'cofiwear',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '14',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
after: function() {
if (!this.hasNext()) {
myButton.hide();
}
},
resolution: 'standard_resolution',
after : function() { console.log('a'); }
});
var tab2 = new Instafeed({
target: 'tab2',
get: 'tagged',
tagName: 'cofiwear',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '14',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
after: function() {
if (!this.hasNext()) {
myButton.hide();
}
},
resolution: 'standard_resolution',
after : function() { console.log('a'); }
});
tab1.run();
//tab2.run();
myButton.on('click',function(){
var activeTab = $("div.tabs .button.active").attr("rel");
if (activeTab=='tab1') {
tab1.next()
}else{
tab2.next()
}
});
$('.button[rel="tab2"').one('click',function(){
tab2.run()
});
$(".tab-content:not(:first)").hide();
$("div.tabs .button").on('click',function(e) {
e.preventDefault();
var activeTab = $(this).attr("rel");
$("div.tabs .button").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
$("#"+activeTab).fadeIn();
});
});
jsFiddle：http://jsfiddle.net/4sggnf60
如果您需要添加更多标签，请阅读github上的这篇文章：..feed display more then one tag..
答案 1 :(得分：0)
我尝试重新组织您的代码，希望这会对您有所帮助。现在，当您单击按钮时，另一个按钮的内容将被隐藏，但这不会解决。问题是，当你要求加载问题是理解活动选项卡，所以只填充该选项卡：
$(function() {
tabs();
instafeed();
});
function tabs() {
$(".tab-content").hide();
var tabAcive = $(".button.active").attr('rel');
$("#" + tabAcive).show();
$("div.tabs .button").click(function() {
$("div.tabs .button").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
}
var instafeedArrObj={};
function instafeed() {
var myButton = $('#load-more');
$('.tab-content.instafeed').each(function(index, element ) {
var tabObj = new Instafeed({
target: element.id,
get: 'tagged',
tagName: 'cofiwear',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '14',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
after: function () {
if (!this.hasNext()) {
myButton.hide();
}
},
resolution: 'standard_resolution',
after: function () {
//console.log('a');
}
});
instafeedArrObj[element.id] = tabObj;
tabObj.run();
$(':button[rel="' + element.id + '"]').click({tabObj: tabObj}, function (e) {
//$(':button[rel][rel!="tab3"]').hide();
$('#' + element.id).empty();
e.data.tabObj.next();
//tab1.next();
});
});
myButton.on('click', function () {
var tabAcive = $(".button.active").attr('rel');
$("#" + tabAcive).show();
instafeedArrObj[tabAcive].next()
});
}img {
width: 50px;
}<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://instafeedjs.com/js/instafeed.min.js"></script>
<script type="text/javascript">
// Generated by CoffeeScript 1.3.3
(function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"most-recent",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="most-recent"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),f.src=s.images[this.options.resolution].url,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this);
</script>
<section class="container-wrap" id="community">
<div class="tabs">
<button class="button active" rel="tab1">#tab1</button>
<button class="button" rel="tab2">#tab2</button>
<button class="button" rel="tab3">#tab3</button>
<button class="button" rel="tab4">#tab4</button>
</div>
<div id="tab-container">
<div class="tab-content instafeed" id="tab1"></div>
<div class="tab-content instafeed" id="tab2"></div>
<div class="tab-content instafeed" id="tab3"></div>
<div class="tab-content instafeed" id="tab4"></div>
</div>
<button class="btn-wrap" id="load-more" href="#">
<div class="btn">load more</div>
</button>
</section>