获取一个body类元素并将其转换为PHP变量

Grabbing a body class element and turning it into a PHP variable

本文关键字：转换 变量 PHP 元素 body 一个 获取      更新时间：2023-09-26

我正在使用响应式设计技术对一个新网站进行主题化，主要使用CSS媒体查询，效果非常好。然而，在某些情况下，我需要获得浏览器的宽度，我通过添加一个带有JQuery:这个漂亮位的<html>类来实现这一点

    (function($) {
        //add drupal 7 specific code
        Drupal.behaviors.getWidthTheme = {
            attach: function(context, settings) {
                //end drupal calls
var w, html = $('html'), _window = $(window);
 _window.resize(onResize);
function onResize() {
w = _window.width();
if (w >= 310 && w < 480 )  html.addClass('mobile-320').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-480');
else if (w >= 481 && w < 768 )  html.addClass('mobile-480').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-320');
else if ( w >= 768 && w < 960 ) html.addClass('mobile-768').removeClass('mobile-480').removeClass('desktop').removeClass('mobile-320');
else html.addClass('desktop').removeClass('mobile-480').removeClass('mobile-768').removeClass('mobile-320');
                }
onResize();
            }}})(jQuery);

上面的代码将一个类注入到<html>元素中，例如<html class="mobile-320">等，具体取决于浏览器或设备的宽度。

我想做的是获取该类，并以某种方式将其转换为PHP变量，这样我就可以关闭一些代码。理想情况下是这样的：

<?php if ($mobile-320): ?>
<!--do something-->
<?php else : ?>
<?php if ($mobile-480 || $mobile-768 || $desktop): ?>
<!-- do some other thing -->
<?php endif;  ?>

理想情况下，这些类是从已经呈现的HTML类中获取的。然而，我不确定这是否可行，因为PHP需要在服务器上渲染，而我正在通过JQuery注入HTML类。我基本上对做这件事的任何方式都持开放态度，不是基于我上面所说的，但希望你能明白。

我不太确定我是否理解，但也许你可以发起另一个ajax请求，发送你刚刚插入的类的名称。php的响应可以是json数据来控制接下来需要执行的内容，也可以是直接的html/javascript。查看更多的html/javascript会有所帮助。

$.getJSON('getDeviceActions.php',
  { className: $('html').attr('class') }, 
  function(phpResult){
     if( phpResult.switchOffA == true ) $('.divsel').hide(); //or what not
  }
});

为什么不直接用javascript编写switch语句，而不询问服务器，之后它将如何处理信息？

您可以将所有类放在一个数组中，并在data:中传递该数组

var classes = $('html').attr('class').match(/'w+/g);
$.ajax({
    type: 'post',
    url: 'url.php',
    data: {
        classes: classes
    }
    success: function() {
        // Blabla
    }
});

顺便说一句，如果你在$('html'):中只有这些类，你的第一段代码可以减少

if (w >= 310 && w < 480 ) { html.removeClass().addClass('mobile-320'); }
相关文章：