我将创建一个 PHP 代码片段或者可以被视为 WordPress 代码片段,并且希望每次在前端加载该模块时创建一个动态 css 类,jQuery 将使用该类来设置我的前端样式结束。
场景如下:
假设第一次在前端加载模块,它应该有一个类似这样的类:module-front-end-123
我可以使用 jQuery 中的这个确切的类来根据数据设置其内容的样式仅存在于此模块中。
现在假设添加了另一个相同类型的模块,它应该生成一些类似 module-front-end-124
的类,我将再次使用 jQuery 中的这个类来输出它的样式.
这种方法的优势在于,我将只编写一次代码片段,每当加载模块时,我将获得它自己的类,jQuery 代码将在该模块上运行,对于其他模块样式将是独立为其他模块工作。
我可以通过 PHP 创建该类,但不知道如何在 jQuery 或类似的东西中使用该类 ...
有人可以指导我吗?我只想写一次我的样式,每次都将应用于获取的类。
最佳答案
在您的 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>');
只是为了举例说明如何进入每个动态类。您可以在那里用您的代码做任何您想做的事。
关于php - 如何使用 PHP 和 jQuery 创建动态类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41363266/