使用 Javascript/Php：试图显示背景图像 - 逻辑错误？答案

【问题标题】：Using Javascript/Php: Trying to display background image - logic wrong?使用 Javascript/Php：试图显示背景图像 - 逻辑错误？
【发布时间】：2017-10-19 08:20:20
【问题描述】：

因此，如果屏幕尺寸最小，我想在hero-wrapper div 中使用 css 显示背景图像（即 wordpress 帖子中的缩略图）。 900 像素。

我使用 php 检查是否有缩略图，然后使用 javascript 检查屏幕宽度，然后将 background-image 属性添加到潜水。不行，我觉得我的逻辑不对？？

HTML

    <?php
        if ( has_post_thumbnail() ) { ?>
            <?php    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

            <script type="text/javascript">
                if (jQuery(window).width() == 900) {
                 <?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
                }
            </script>   
    <?php } ?>  
    <section class="hero-wrapper">

        <figure class="frontpage-hero">
            <div class="banner-box">
                <h2>GET YOUR FREE CASE ASSESSMENT?</h2>
                <h6>Enter your details below for a consultation</h6>
                <form>
                    <input type="text" name="name" placeholder="Name..">
                    <input type="text" name="email" placeholder="Email..">
                    <input type="submit" name="submit">
                </form>     
            </div>           
        </figure>

    </section>

css

.hero-wrapper {
    margin: 0;
    padding: 0;
    min-height: 669px;
    background-repeat: no-repeat;
}
@media screen (min-width: 900px) {
    .hero-wrapper {
        min-height: 669px;
        background-repeat: no-repeat;
    }
}

【问题讨论】：

我没有检查语法，但你的 jQuery 窗口宽度只检查返回的值是否等于 900，而不是 900 或更大
也许你的 div 没有宽度和高度。然后你就看不到背景图片了。
@Kokodoko 我已经添加了 css，有一个最小高度
@netpraxis 是 javascript 和 php 的新手，检查屏幕宽度和添加 php 图像的替代方法是什么？
正如@netpraxis 所说：if (jQuery(window).width() >= 900) {

标签： javascript php html css wordpress

【解决方案1】：

您在<script> 标记内回显<section> 标记。你应该改变这个

<script type="text/javascript">
            if (jQuery(window).width() == 900) {
             <?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
            }
        </script>

这样的事情

<script type="text/javascript">
            if (jQuery(window).width() >= 900) {
             $('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
            }
        </script>

【讨论】：

如果窗口大小发生变化，您的方法将不起作用。它还要求 jQuery 在浏览器解析器到达页面的这一部分时可用。而且您的代码实际上不会创建元素。
@Flying 从问题中我得到的印象是 OP 试图更新具有“hero-wrapper”类的现有 div。这不是100％清楚，但这似乎是意图。所以在这方面这个答案会很好。
考虑到它是 wordpress 页面模板（看看wp_get_attachment_image_src()） - 他显然试图生成页面并弄乱了服务器和客户端代码。

【解决方案2】：

你的假设有两次错误：

您的 jQuery(window).width() == 900 条件将只运行一次，并且不会反映窗口大小的变化
您正在尝试使用 php（服务器端语言）在 javascript（客户端代码）代码块中输出 html（客户端标记）。您最终会遇到语法错误。

正确的做法是只输出你的 html 元素并使用CSS media queries 来控制它的外观。比如：

.hero-wrapper {
  display: none;
}
@media (min-width: 900px) {
  .hero-wrapper {
    display: block;
  }
}

还请注意，显示为背景的图像不会强制元素具有任何高度，因此您的元素将以 0px 高度显示（换句话说，不可见）。您将需要以某种方式指定元素的尺寸（并记住图像可能具有不同的纵横比）。

毕竟，不使用背景图片而是插入普通图片并使用 CSS 控制其尺寸可能更容易。

【讨论】：

【解决方案3】：

你没有用你的代码向现有的“hero-wrapper” div 添加任何东西，你只是在一个 Javascript 块中回显一些 HTML，这不会实现任何东西。您的控制台中几乎肯定有语法错误。最终呈现的页面将如下所示：

<script type="text/javascript">
    if (jQuery(window).width() == 900) {
        <section class="hero-wrapper" style="background-image: url('thumbnail.png') >
    }
</script>   
<section class="hero-wrapper">
    <figure class="frontpage-hero">

...等

这会给你一个 JS 控制台错误：

Uncaught SyntaxError: Unexpected token

即使该部分有效，HTML 也是无效的，因为您从不使用 " 关闭样式属性，并且此代码只会在窗口宽度为恰好 900px 时执行，我不这样做'认为你不是故意的。

你需要做的是改变现有的 div 来添加样式，并且当宽度大于等于 900px 时也允许它。应该这样做：

<script type="text/javascript">
$(document).ready(function() {
    if ($(window).width() >= 900) {
      $(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
    }
});
</script>

我还将代码包装在 document.ready 中，以便在页面准备好之前它不会运行。

【讨论】：

【解决方案4】：

我会删除 javascript 并在您的 CSS 媒体查询中使用 display: none; 执行此操作隐藏 900px 以下屏幕的元素，即

HTML/PHP

<?php
if ( has_post_thumbnail() ) { 
$thumb = wp_get_attachment_image_src( 
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; 
} ?>

在你的 CSS 中

@media screen (min-width: 900px) {
    .hero-wrapper {
        min-height: 669px;
        background-repeat: no-repeat;
        display: block;
    }
}

@media screen (max-width: 900px) {
    .hero-wrapper {
        display: none;
    }
}

【讨论】：