javascript - 使用 jQuery 封装动态内容

Question

在 Sitefinity CMS 中，我使用的库脚本似乎是在后端文件中编译的。换句话说，我无法访问或更改源代码。

画廊按其应有的方式工作，但我想为其添加一个灯箱。所以我开始将“wrapAll”与 on load 结合使用。这适用于第一个图像，但一旦动态加载下一个图像(换句话说，图像和周围的标签被替换)，它就会停止工作。

我被困住了。有人有什么想法吗？

我的代码:

$(window).on("load", function () {
var i = 0;
$(".galleria-images .galleria-image img").each(function () {
    i++;
    //alert(i);
    var lightboximg = $(this).attr("src");
    $(this).wrap("<a href=" + lightboximg + " class='fancybox'></a>");

});
$(".fancybox").fancybox();
})

我还尝试将 fancybox() 添加到结构中，但这也可以工作一次。

生成的 HTML(应该如此):

<div style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;" class="galleria-images">
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;" class="galleria-layer"></div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 4; background: rgb(0, 0, 0) none repeat scroll 0% 0%; display: none;" class="galleria-frame">
</div>
</div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 563px; height: 340px; transition: none 0s ease 0s ; z-index: 1;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none; width: 563px; height: 352px;" class="galleria-layer">
</div>
<div style="overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 4; background: rgb(0, 0, 0) none repeat scroll 0% 0%; display: none;" class="galleria-frame">
</div>
<a href="/images/default-source/scholen/adm/administratief-en-juridisch-44.jpg?sfvrsn=2" class="fancybox">
<img src="/images/default-source/scholen/adm/administratief-en-juridisch-44.jpg?sfvrsn=2" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; transform: translate3d(0px, 0px, 0px); width: 544px; height: 340px; position: absolute; top: -6px; left: 0px;" height="340" width="544"></a>
</div>
</div>

下一个图像看起来相同，只是图像没有换行。

更新

最终通过杀死 Galleria 并使用我自己的选项重新开始解决了这个问题。摘录如下:

Galleria.configure({

extend: function (options) {

    Galleria.log(this) // the gallery instance
    Galleria.log(options) // the gallery options

    // listen to when an image is shown
    this.bind('image', function (e) {

        Galleria.log(e) // the event object may contain custom objects, in this case the main image
        Galleria.log(e.imageTarget) // the current image

        lightboximg = jQuery(e.imageTarget).attr("src");
        jQuery(e.imageTarget).addClass('test');
        jQuery(e.imageTarget).wrap("<a href=" + lightboximg + " class='fancybox'></a>");
        $(".fancybox").fancybox();

    });
}

});

Answer 1

问题是“load”事件仅触发一次。这就是为什么您只能看到一张图像被包裹的原因。

这里有一个简单的方法:

HTML

<div id="container">
    Hello World
</div>

JS

(function() {
    setInterval(function(){
        $("#container").append('<div class="item new">New Item</div>');
    }, 3000);

    setInterval(function() {
        $('.item').css('color', 'red');
        $('.item').removeClass('new');
    }, 100);
})();

Fiddle

这种方法的缺点是页面上不必要的负载，因此如果您需要性能，请查看:Determining if a HTML element has been added to the DOM dynamically

第三个选项，我认为最好的选项是在添加图像时触发自定义事件，但为此您需要更改代码，该代码实际上负责将图像添加到页面:

$(document).trigger('imageAdded');

$(document).on('imageAdded', function() {....})