Javascript Jquery自定义排序问题

我有一个从API页面加载照片的页面

**编辑：这是一个带有页面的代码笔，错误发生在那里：

最初加载页面时，我使用此按钮调用信息并使用lightgallery插件：

// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
    function displayPhotos(data) {
        var photoData = '';
      $.each(data, function (i, photo) {
          photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"'+ 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' +  photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
      });
            // Putitng into HTML
      $('#photoBox').html(photoData);

            //--------//
            // Calling Lightbox
            //--------//
      $('#photoBox').lightGallery({
      selector: '.tile',
      download: false,
      counter: false,
      zoom: false,
      thumbnail: false,
      mode: 'lg-fade'
        });
        } // End Displayphotos function

// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);

这会在点击按钮时加载新照片，但会破坏lightbox插件的功能

有什么想法吗？还有人碰到这个吗

---

--感谢

因此，原因是当连接lightGallery而不正确破坏以前的侦听器时，库存在已知问题：

在这种情况下，解决方案是在

displayPhotos

函数中重新初始化之前进行简单的

destroy

只需在外部范围内声明一个变量

gallery

，如：

var gallery

然后更新
displayPhotos
函数，如下所示：

//destroy if existing
if(gallery) gallery.data('lightGallery').destroy(true);
//initialise the plugin
gallery = $('#photoBox').lightGallery({
    selector: '.tile',
    download: false,
    counter: false,
    zoom: false,
    thumbnail: false,
    mode: 'lg-fade'
});

更新的代码笔：

此处的工作片段：


//----------------------------------------------------------------//
//--------//变量//---------------//
// ----------------------------------------------------------------//
变量“API=”https://api.unsplash.com/users/nathananderson/photos/?client_id=1fc3cf0554dd08f8491af5cd37ac945bebde6b5032613d61419f2b92ddde1d9a&per_page=20";
var popularPhotos={
订购人：“受欢迎”，
格式：“json”
};
var latestPhotos={
订购人：“最新”，
格式：“json”
};
var oldestPhotos={
订购人：“最老的”，
格式：“json”
};
// ----------------------------------------------------------------//
//----------------//未刷新的照片//---------------//
// ----------------------------------------------------------------//
var画廊；
功能显示照片（数据）{
var-photoData=''；
$。每个（数据、功能（i、照片）{
photoData+=''+'到目前为止，这张照片有'+''+照片。likes++'+''likes.++'如果你愿意，你可以下载这张照片，它有一个免费的许可证。
'+''；
});
//将其转换为HTML
$（'#photoBox'）.html（photoData）；
//-----------------------------------//
//------呼叫灯箱------//
//-----------------------------------//
如果（画廊）画廊数据（'lightGallery'）。销毁（真）；
画廊=$（“#照相盒”）。lightGallery({
选择器：'.tile'，
下载：错，
柜台：错，
zoom:错，
缩略图：错，
模式：“lg淡入淡出”
});
}//结束显示照片功能
//在pageload上显示流行照片
$.getJSON（unplashapi、popularPhotos、displayPhotos）；
//按钮单击更改
$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}); // 结束按钮
//展示流行照片
$（“#流行”）。单击（函数（）{
$.getJSON（unplashapi、popularPhotos、displayPhotos）；
}); // 结束按钮
//展示最新照片
$（“#最新”）。单击（函数（）{
$.getJSON（unplashAPI、最新照片、显示照片）；
}); // 结束按钮
//显示最旧的照片
$（“#最早”）。单击（函数（）{
$.getJSON（unplashAPI、oldestPhotos、displayPhotos）；
}); // 结束按钮
html{
框大小：边框框；
}
*,
*：：之后，
*：：之前{
框大小：继承；
}
/*由字体Squirrel生成(https://www.fontsquirrel.com)2016年7月25日*/
@字体{
字体系列：“courier_primeregular”；
src:url（“../fonts/courier\u prime-webfont.woff2”）格式（“woff2”），url（“../fonts/courier\u prime-webfont.woff”）格式（“woff”）；
}
@字体{
字体系列：“courier_primeitalic”；
src:url（“../fonts/courier\u prime\u italic-webfont.woff2”）格式（“woff2”），url（../fonts/courier\u prime\u italic-webfont.woff”）格式（“woff”）；
}
@字体{
字体系列：“courier_primebold”；
src:url（“../fonts/courier\u prime\u bold-webfont.woff2”）格式（“woff2”），url（../fonts/courier\u prime\u bold-webfont.woff”）格式（“woff”）；
}
身体，
.过滤器框。过滤器：悬停，
.filter box.filter.active，
.lg行动。lg前：之后，
.lg行动。lg下一步：之前{
字体系列：“courier_primeregular”，无衬线；
字体大小：400；
字体风格：普通；
字体拉伸：正常；
}
.过滤器盒。过滤器，
.照片说明span{
字体系列：“courier_primebold”，无衬线；
文本重量：600；
}
收割台跨度{
字体系列：“courier_primeitalic”，无衬线；
}
html，
身体{
保证金：0；
填充：0；
}
a:悬停{
光标：指针；
}
p{
边际上限：0；
}
h1，
h2，
h3，
h4，
h5，
h6{
字体家族：继承；
行高：继承；
字体大小：继承；
边际上限：0；
}
img{
垂直对齐：中间对齐；
}
身材{
保证金：0；
}
/*全局布局设置*/
* {
框大小：边框框；
}
.证明结束{
证明内容：柔性端；
}
1.不，我要成长{
flex-grow:0；
}
/*因为。。。乐趣*/
：：选择{
背景：#000000；
颜色：#FFFFFF；
}
/*因为我受不了这些*/
*：焦点{
大纲：无；
}
身体{
保证金：0；
填充：0；
高度：100vh；
背景色：#FFFFFF；
颜色：#000000；
}
#顶部，
#底部，
#左,，
#对{
背景：#000000；
位置：固定；
}
#左,，
#对{
排名：0；
底部：0；
宽度：10px；
}
#左{
左：0；
}
#对{
右：0；
}
#顶部，
#底部{
左：0；
右：0；
高度：10px；
}
#顶{
排名：0；
}
#底部{
底部：0；
}
a{
颜色：#000000；
}
.当前a{
颜色：#000000；
文字装饰：下划线；
}
标题{
显示器：flex；
填充：1.5em 1.5em 0 1.5em；
弯曲方向：立柱；
}
收割台h1{
颜色：#000000；
文本对齐：左对齐；
字号：2em；
}
@仅介质屏幕和（最小宽度：480px）{
收割台h1{
页边距底部：0；
}
}
收割台跨度{
显示：无；
}
@仅介质屏幕和（最小宽度：480px）{
收割台跨度{
显示：内联；
文本对齐：左对齐；
}
}
@仅介质屏幕和（最小宽度：480px）{
标题{
填充物：2.5em 2.5em 1em 2.5em；
}
}
.过滤箱{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
填充：0.1.5em；
}
.过滤器箱.过滤器{
字号：1em；
背景：#FFFFFF；
颜色：#000000；
边界：3.5px固体#000000；
填充：0.35em 2.25em；
保证金：0.5em 0.5em；
库索
//destroy if existing
if(gallery) gallery.data('lightGallery').destroy(true);
//initialise the plugin
gallery = $('#photoBox').lightGallery({
    selector: '.tile',
    download: false,
    counter: false,
    zoom: false,
    thumbnail: false,
    mode: 'lg-fade'
});