Turbolinks 禁止 Javascript 附加 class 背景图片

Question

我正在将前端 html 主题与 Laravel 应用程序集成，我运行遇到 turbolinks 不允许 Javascript 附加 [=20] 的问题=] 类。这导致背景图像仅在刷新时显示。

<div class="intro-banner" data-background-image="/storage/images/hero.jpg">
    <div class="container">

custom.js

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/
function inlineBG() {

    // Common Inline CSS
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

} inlineBG();

// Fix for intro banner with label
$(".intro-search-field").each(function() {
    var bannerLabel = $(this).children("label").length;
    if ( bannerLabel > 0 ){
        $(this).addClass("with-label");
    }
});

// Photo Boxes
$(".photo-box, .photo-section, .video-container").each(function() {
    var photoBox = $(this);
    var photoBoxBG = $(this).attr('data-background-image');

    if(photoBox !== undefined) {
        $(this).css('background-image', 'url('+photoBoxBG+')');
    }
});

Answer 1

看起来这段代码只运行一次：在初始页面加载时。要让它在每次页面加载时都正常工作，您需要运行它在 turbolinks:load 上。由于脚本还将元素附加到页面，因此您需要注意不要以不必要的重复元素结束。在访问者离开之前，Turbolinks 会存储一份处于最终状态的页面副本。此缓存副本将包括任何附加的 HTML。因此，请确保您的代码在追加之前检查追加元素是否存在，或者在缓存元素之前将其移除。

下面采用后一种方法，通过删除 turbolinks:before-cache 上的元素：

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/

$(document).on('turbolinks:load', function () {
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

    // Fix for intro banner with label
    $(".intro-search-field").addClass(function () {
        if ($(this).children("label").length) return "with-label";
    });

    // Photo Boxes
    $(".photo-box, .photo-section, .video-container").css('background-image', function () {
        return 'url('+$(this).attr('data-background-image')+')'
    })
});

$(document).on('turbolinks:before-cache', function () {
    $(".single-page-header, .intro-banner").each(function() {
        $(this).children(".background-image-container").remove();
    });
});

我也整理了一些jQuery代码。许多 jQuery 函数接受函数作为参数，这在一定程度上简化了事情，并消除了使用 each.

迭代 jquery 选择的需要

最后，在 $(document).on('turbolinks:load', function () {…} 中包装大量片段并不是很好的做法，因为它会产生对 Turbolinks 的依赖，如果您决定转移到其他地方，则必须更新调用它的每个地方。如果您喜欢冒险，您可能想要创建一个迷你框架，就像我在这里创建的那样：

Turbolinks 禁止 Javascript 附加 class 背景图片

Turbolinks prohibiting Javascript appended class for background images

javascript

css

laravel

turbolinks