javascript - 将PHP数据拉入JS以动态改变屏幕宽度的BG图像

Question

在我的 WP 模板中，我在我的 Repeater 自定义字段中为 bg imgs 创建了两个子字段:

1. 大型设备和桌面业务
2. 移动业务

在我的 content-section.php模板部分，我创建了一个循环并注入(inject) get_sub_field('background_image');作为背景图片成功。我想在宽度为 < 768 时将 bg-img 动态更改为移动设备.我知道您必须使用 wp_localize_script() 将 php 数据传递给 js等..

我尝试过的:

1. 为 get_sub_field('mobile_background_image'); 设置一个变量在 content-section.php
2. 使用 AFC 函数的不同变体在 functions.php 中提取 bg 数据: the_field('mobile_background_image') , get_sub_field('mobile_background_image') , the_sub_field('mobile_background_image');但是当我 console.log() 时甚至没有看到任何数据被提取var，我得到的最多是null

3. 写了我的 .each()多种方式:

   // Attempt #1
   $('.bg-img').each(function() {
   
     if($(window).width() < 768) {
       var bgUrl = 'url("' + php_vars.mobile_bg + '") center center no-repeat)'
       var style = {
           'background': bgUrl,
           'background-size': 'cover'
       }
       $('.bg-img').css(style);
     }
   
   }); 
   
   // Attempt #2
   if($(window).width() < 768) {
   
     $('.bg-img').each(function() {
       var bgUrl = 'url("' + php_vars.mobile_bg + '") center center no-repeat)'
       var style = {
           'background': bgUrl,
           'background-size': 'cover'
       }
   
       $('.bg-img').css(style);
     });   
   
   }
   

还有变体 $('.bg-img').css(style);完全在功能之外。

问题:出于某种原因，我在检查时没有看到任何变化，也没有看到任何控制台错误。我怎样才能正确地提取 sub_field 数据并将其传递到我的 functions.php 和我的 scripts.js，一旦该数据被提取并设置在 var 中就是我的当前函数使用 .each() if();等等...正确吗？

Content-section.php

<?php if( have_rows('section_content') ): ?>
    <?php while( have_rows('section_content') ): the_row(); 
        $sectionBG = get_sub_field('background_image');
        $sectionContent = get_sub_field('section_text');
    ?>
        <?php if( $sectionBG ): ?>
            <div style="background: url('<?php echo $sectionBG ?>') center center no-repeat; background-size: cover;" class="full-height v-center-content bg-img">
        <?php endif; ?>
                <div class="container animation-element">
                    <div class="row">
                        <?php if(get_row_index() % 2 == 0) : ?>
                            <div class="col-12 col-md-6 offset-md-6 col-xl-5 offset-xl-7">
                        <?php else : ?>
                            <div class="col-12 col-md-6 col-xl-5">
                        <?php endif; ?> 
                            <div class="section-content">
                                <?php echo $sectionContent ?>
                            </div>
                        </div>
                    </div>
                </div>
        <?php if( $sectionBG ): ?>  
            </div>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

函数.php

wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '', true);

wp_localize_script('main-js', 'php_vars', array(
    'mobile_bg' =>  get_sub_field('mobile_background_image')
));
}

Script.js

$('.bg-img').each(function() {

    if($(window).width() < 768) {

        var bgUrl = 'url("' + php_vars.mobile_bg + '") center center no-repeat)'
        var style = {
            'background': bgUrl,
            'background-size': 'cover'
        }

        $('.bg-img').css(style);
    }

}); 

Answer 1

这就是CSS媒体查询的作用。在您的主样式表中，您将拥有

background-image: url('pic1.jpg');

在您的移动 css 文件中您将拥有

background-image: url('pic2.jpg');

在你的 html 中你会有

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href='mobile.css" type="text/css" media="only screen and (max-device-width:768px)">