php - 如何使用 jQuery 条件测试设置 php 变量？

Question

我正在尝试在 php 文件内使用 jQuery 设置 php 变量。

在我的 php 文件中，我想运行一个 jQuery 脚本来测试条件是否成立，如果成立，它将 php var 设置为一个值，否则将其设置为另一个值，以便我稍后可以在 php 中使用它。

我正在使用它来尝试根据窗口大小设置 WordPress 中背景图像的大小。但现在，我只是想回显变量 ($bg_img_r)。这是我所拥有的:

<?php function bg_size() { ?>
    <script>
        jQuery(document).ready(function($) {
            if ($(window).height()>720;  {
                <?php $bg_img_r = wp_get_attachment_image_src( $bg_img_id, 'fullbg' ); ?>
            }
            if ($(window).height()<720; {
                <?php $bg_img_r = wp_get_attachment_image_src( $bg_img_id, 'smallbg' ); ?>
            }
        });
    </script>
<?php } ?>

<?php
    echo $bg_img_r;
?>

当我这样做时，我收到一个错误，指出 $bg_img_r 是一个 undefined variable 。

Answer 1

在 Javascript 有机会执行之前，PHP 完全发生在服务器端。服务器将 HTML 传送到客户端浏览器，然后浏览器运行 Javascript。因此，不可能使用 JavaScript 变量来影响 PHP 执行。您必须使用更复杂的系统。

解决根据窗口高度有条件地设置背景图像的问题的最简单方法可能是根本不在服务器端设置它，而是包含包含两种可能性的数据属性并使用 javascript 填充正确的属性之后。例如，您可以包含如下数据属性:

<div id="content-with-background"
    data-fullbg-src="<?php echo wp_get_attachment_image_src( $bg_img_id, 'fullbg' ); ?>"
    data-smallbg-src="<?php echo wp_get_attachment_image_src( $bg_img_id, 'smallbg' ); ?>"
>
    <!-- html contents -->
</div>

然后使用jquery适当设置背景:

$('document').ready(function() {
    var key = ($(window).height() > 720 ? 'fullbg-src' : 'smallbg-src');
    var $content = $('#content-with-background');
    $content.css('background-image', 'url(' + $content.data(key) + ')');
});

这段 JavaScript 代码可能位于 .js 中包含使用 <script src="..."></script> 的文件，但您也可以将其直接嵌入 <script type="text/javascript">...</script>" 中如果需要的话，可以添加标签。

这只是一种可能性。还有其他解决方案，例如使用 php 输出 javascript 变量来存储背景，然后有条件地设置它们，或者使用 AJAX 检索适当的背景 url 并使用它(尽管我不建议将此解决方案使用 AJAX，因为它是不必要的额外服务器调用，这会减慢速度)。您甚至可以使用 css3 媒体查询并输出动态创建的 css 文件(这可能是一个优雅的解决方案，但设置起来并不简单)。有些浏览器甚至发送包含窗口大小的 http header ，如果您的整个客户群都使用此类浏览器，您可以使用这些 header (但此解决方案需要通用 Web 应用程序通常不存在的特定条件)。