HTML形式的动态Javascript标记

Question

我正在尝试添加一个在FOR循环中的标记。但它们与HTML标记的工作方式不同。

下面是我在JavaScript中做的事情

var numberOfImages=allpost.page.attachments.length;
$(".GalleryAppend").append('<ul class="gallery" id="Gallery"></ul>');
for(var i=0;i<=numberOfImages;i++){
    var blogpost = '<li><a href="'+allpost.page.attachments[i].url+'" rel="external"><img src="'+allpost.page.attachments[i].url+'" alt="Lorem ipsum dolor sit amet "/></a></li>';
    $(".gallery").append(blogpost);
    $(".loading-text").remove();
    $("html").trigger("refresh");
}

我想让它变成这样。

<ul class="gallery" id="Gallery">
    <li><a href="http://www.example.com/images/photo-gallery/big/6.jpg" rel="external"><img src="http://www.example.com/images/photo-gallery/thumbs/6.jpg" alt="Lorem ipsum dolor sit amet "/></a></li>
    <li><a href="http://www.example.com/images/photo-gallery/big/7.jpg" rel="external"><img src="images/photo-gallery/thumbs/7.jpg" alt="Lorem ipsum dolor sit amet "/></a></li>
    <li><a href="http://www.example.com/images/photo-gallery/big/8.jpg" rel="external"><img src="images/photo-gallery/thumbs/8.jpg" alt="Lorem ipsum dolor sit amet "/></a></li>
</ul>

在底部添加了一件东西。如果你能在此基础上提出一些建议。

  (function(window, PhotoSwipe){
    document.addEventListener('DOMContentLoaded', function(){
        var
            options = {},
            instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
    }, false);
}(window, window.Code.PhotoSwipe));

当我尝试你的代码时，我得到了这个错误：“没有图像要传递”。

​

​

因为如果我不这么做，我的画廊就不能工作了。我尝试了很多组合。

有人能提出一些与此相关的建议吗？

谢谢!(预付款)

Answer 1

您正在jQuery (客户端)中进行DOM更改，并使用以下命令刷新页面：

$("html").trigger("refresh");

这怎么能留住它呢。这就是它不能工作的原因。您需要通过再次调用这些处理程序来重新启用它们。我猜你用的是Lightbox之类的插件。因此，您需要从技术上替换：

$("html").trigger("refresh");

具有以下功能：

$(lightBoxElement).lightbox("destroy");
$(lightBoxElement).lightbox("enable");

这是一个伪代码。替换为您的实际销毁和启用功能，以重新启用动态添加的项目。

尝试#2

做这样的事情！

var numberOfImages=allpost.page.attachments.length;
$(".GalleryAppend").html("").append('<ul class="gallery" id="Gallery"></ul>');
for(var i=0;i<=numberOfImages;i++){
    var blogpost = '<li><a href="'+allpost.page.attachments[i].url+'" rel="external"><img src="'+allpost.page.attachments[i].url+'" alt="Lorem ipsum dolor sit amet "/></a></li>';
    $(".gallery").append(blogpost);
    $(".loading-text").remove();
    var options = {},
       instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}