2013-05-09 74 views
2

我想在php文件里面使用jQuery设置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是一个不确定的变量。

+0

Php是服务器端代码; jquery/JavaScript是客户端。你不能像这样混合两者,因为它们不能同时运行。 – Blazemonger 2013-05-09 03:59:35

回答

1

PHP完全发生在服务器端的JavaScript之前甚至有机会执行。服务器将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来检索合适的背景网址并使用它(尽管我不会推荐AJAX用于此解决方案,因为它是一个不必要的额外服务器调用,这可能会减慢速度)。你甚至可以使用css3媒体查询并输出一个动态创建的css文件(这可以是一个优雅的解决方案,但不是很容易设置)。有些浏览器甚至发送包含窗口大小的http头文件,如果您的整个客户端使用这些浏览器,则可以使用这些头文件(但该解决方案需要通用Web应用程序通常不存在的特定条件)。

+0

噢噢噢,我喜欢这个主意(包括数据属性,背景,然后设置与jQuery选择。)只是考虑看看这个,我认为浏览器是不是真的要加载两个背景,对不对?此练习的重点在于避免在手机上加载背景的1000+像素宽的图像。 – JPollock 2013-05-09 14:23:01

+1

@JPollock,对,数据属性几乎都被浏览器忽略,所以它绝对不会加载图像。所以这个解决方案只会在分配给后台网址的时候加载图像(并且根本不会加载其他图像)。 – 2013-05-09 15:14:55

+0

我终于有机会尝试这个。这就是我在页面源代码中获得的:''我把所有我用的代码放到了数据库中,一个要点,如果你想看到https://gist.github.com/Shelob9/5551508。 – JPollock 2013-05-10 00:01:30

0

你不能做这种方式。 php处理文件并将输出发送到远程计算机。 jquery由用户计算机处理,所以在jquery运行时,服务器已经摆脱了这个页面。

它听起来像什么,你会想要做的是一个jQuery AJAX回调到服务器,以获得您正在寻找的数据。