Javascript 使用ajax填充unite库

您好，我目前正在尝试使用ajax填充unite gallery，但是gallery只是挂起一个加载图标，没有显示任何图像，对此有任何帮助将不胜感激

阿贾克斯

$（'document'）.ready（函数（）{
var文件夹=”http://localhost/client%20side%20web%20coursework/files/";
jQuery（“#gallery”）.unitegallery（）；
$.ajax({
url:文件夹，
asynch:false，
cache:false，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
if（val.match（/\（jpe？g | png | gif）$/）{
$（“#图库”）。附加（“”）；
}
});
}
});
});

我们正在尝试填充的div

<div id="gallery" style="display:none;">
</div>

任何不熟悉unite gallery的人都可以在这里找到它的文档

任何帮助都将不胜感激

---

是否向包含图像的文件夹发出ajax请求？是否有一个index.php或index.html来运行html？ 在.append参数中有一些无用的附加引号，请尝试以下操作：

$("#gallery").append("<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>");

$（“#图库”）。追加（“”）；

并在ajax响应之后执行console.log（data），如果没有，则将错误calback添加到ajax函数和console.log中，或者在网络选项卡的浏览器控制台中查看响应

编辑

我认为jQuery.find函数不接受任何回调参数，您可以使用.each函数：

var $gallery = $("#gallery");
$(data).find("a").each(function(i, el) {
    var val = $(el).attr('href');
    if (val.match(/\.(jpe?g|png|gif)$/)) {
        $gallery.append("<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>");
    }
});

var$gallery=$（“#gallery”）；
$（数据）。查找（“a”）。每个（函数（i，el）{
var val=$（el.attr（'href'）；
if（val.match（/\（jpe？g | png | gif）$/）{
$gallery.附加（“”）；
}
});

$（'document'）。就绪（函数（）{
var文件夹=”http://localhost/client%20side%20web%20coursework/files/";
$.ajax({
url:文件夹，
asynch:false，
cache:false，
成功：功能（数据）{
var$gallery=$（“#gallery”）；
var imgsToAppend=''；
$（数据）。查找（“a”）。每个（函数（i，el）{
var val=$（el.attr（'href'）；
if（val.match（/\（jpe？g | png | gif）$/）{
imgsToAppend+=“”；
}
});
如果（imgsToAppend）{
$gallery.append（imgsToAppend）；
}
$gallery.unitegallery（）；
}
});
});

---

这就解决了问题。无论如何，谢谢你的帮助。

嗨，西罗，我按照你的建议做了，并在原始问题中添加了一张图片，以显示结果。如果你转到此链接，你会得到什么？因为你制作了这个页面的ajax，但是我不确定这个页面是否存在Shi ciro我把我的工作区改成了我的一个旧网站，所以我有了一个更好的视觉表现，所以链接确实不同，但是这个位置仍然存在，正如我编辑了我的答案的这张图片所示，我认为jQuery find函数不接受callback如果您只需要在应用程序中调用一次ajax请求，那么这个函数就可以很好地工作。我告诉过你，看看插件是否有api函数来刷新图像，以避免每次ajax调用都重新初始化它。但是，如果您只有一个ajax调用，这是最好的方法Hi ciro是的，在我们的情况下，我们只需要调用ajax请求一次，因此此解决方案是合适的，不过感谢您的帮助。

var $gallery = $("#gallery");
$(data).find("a").each(function(i, el) {
    var val = $(el).attr('href');
    if (val.match(/\.(jpe?g|png|gif)$/)) {
        $gallery.append("<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>");
    }
});

$('document').ready(function(){
    var folder = "http://localhost/client%20side%20web%20coursework/files/";
    $.ajax({
        url : folder,
        asynch : false,
        cache : false,
        success: function (data) {
            var $gallery = $("#gallery");
            var imgsToAppend = '';
            $(data).find("a").each(function(i, el) {
                var val = $(el).attr('href');
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    imgsToAppend+="<img alt='uploaded file' src='" + folder + val + "' data-image='" + folder + val + "' data-description='uploaded file by user'>";
                }
            });
            if(imgsToAppend){
                $gallery.append(imgsToAppend);
            }
            $gallery.unitegallery();
        }
    });
});