php - 如何使用 PHP 和 jQuery 创建动态类

Question

我将创建一个 PHP 代码片段或者可以被视为 WordPress 代码片段，并且希望每次在前端加载该模块时创建一个动态 css 类，jQuery 将使用该类来设置我的前端样式结束。

场景如下:

假设第一次在前端加载模块，它应该有一个类似这样的类:module-front-end-123 我可以使用 jQuery 中的这个确切的类来根据数据设置其内容的样式仅存在于此模块中。

现在假设添加了另一个相同类型的模块，它应该生成一些类似 module-front-end-124 的类，我将再次使用 jQuery 中的这个类来输出它的样式.

这种方法的优势在于，我将只编写一次代码片段，每当加载模块时，我将获得它自己的类，jQuery 代码将在该模块上运行，对于其他模块样式将是独立为其他模块工作。

我可以通过 PHP 创建该类，但不知道如何在 jQuery 或类似的东西中使用该类 ...

有人可以指导我吗？我只想写一次我的样式，每次都将应用于获取的类。

Answer 1

在您的 PHP 代码中，您可以使用任何在插入每个代码片段后递增值的变量。如下图所示:

在 php 代码之上添加:

 global $count;
 if $count == '' { $count = 0; }

它只会创建一个全局范围的变量，如果它为空，则会将其设置为 0。完美，现在只需在您的 html 类中使用此变量，如下所示:

<div class="module-front-end-<?php echo $count;?>">HTML DATA GOES HERE </div> <?php $count++; ?>

现在在第一次插入时它会生成 module-front-end-0在第二次插入时它将变为 module-front-end-1每次插入模块时依此类推。

现在只需添加另一个类，例如 get-data，您的代码将如下所示:

<div class="get-data module-front-end-<?php echo $count;?>">HTML DATA GOES HERE </div>

因此，您完成的 html 部分现在移至 JS 部分，在您的 JS 文件中只需添加如下所示的代码:

var count = 0;
$(".get-data").each(function(){
    $('module-front-end-'+count+).append('<p>this is my data</p>');
    count = count + 1;
}):

这样它将为您完成工作。注:.append('<p>this is my data</p>');只是为了举例说明如何进入每个动态类。您可以在那里用您的代码做任何您想做的事。