Php 在这个条件css函数中，应该使用哪个jQuery方法加载标记块？

我正在使用WordPress根据视口的大小进行编辑，但我需要用更合适的方法替换

load（）

方法。您可以通过调整浏览器的大小并观察它根据浏览器大小加载自定义值，在上面的链接中查看其工作原理

CSS示例：

    body:after { 
        display: none; 

        /* Default */
        content: "Mobile";
    }

    @media (min-width: 35em) {
        body:after {
            content: "Desktop";
        }
    }

具体来说，如果JS能够检测到

内容：“Mobile”

处于活动状态，它将加载移动内容。如果它检测到

内容：“桌面”

，它将加载桌面内容

以下是我尝试使用的javascript：

$(function() {
    var currentSize = "Mobile";
    $(window).resize(function() {
        var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

        /* Ridiculous thing to deal with inconsistent returning of
        value from query. Some browsers have quotes some don't */
        size = size.replace(/"/g, "");
        size = size.replace(/'/g, "");

        if (size != currentSize) {
            if (size == 'Desktop') {
               $(".content").load('file.php');
               currentSize = 'Desktop';
            }
        }

    }).resize();

}

我刚刚意识到，

load（）

方法不适合我正在尝试做的事情。如何使用自定义挂钩加载块

下面是一些示例代码，我想插入到桌面版本中以替换移动版本代码：

    <div class="item">
        <h2 class="nav-tab">One</h2>
        <?php the_block('One'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Two</h2>
        <?php the_block('Two'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Three</h2>
        <?php the_block('Three'); ?>
    </div>

一个
两个
三

---

如您所见，有3个自定义挂钩包含更多标记和代码。我不知道如何正确地将其加载到javascript中，以便替换移动版本代码。

我可以理解想要在调整大小方面做些什么，但设备不会从移动设备更改为桌面设备。因此，如果“移动”和“桌面”只是窗口大小的概念性反映，那么就不需要直接阅读

getComputedStyle（）

/

getPropertyValue（）

，而是测试

$（窗口）.width（）

和/或

$（窗口）.height（）

。感谢您的想法，但这部分脚本工作正常。：）若要更改内容，请（a）将HTML包装在包含div中，然后使用

load（）

重新加载从第一个包含的

到最后一个

，或者（b）将块1、2和3包装在各自的

（或类似）中，并执行三个独立的

.load（）

。我无法使用

load（）

因为它试图通过文件或url从服务器中提取数据。据我所知，它不允许我拉一块内容。如果可能的话，我不知道如何使用

load（）。我更喜欢加载一个或多个自定义钩子。这是您控制的服务器还是公共web服务？