如何使用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等與模塊的每個插入。

現在只需添加另一個類，像得到的數據和你的代碼將成爲如下所示：

<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>');只是爲了舉例說明，你怎麼能進入你的每一個動態類。你可以做任何你想在你的代碼中做什麼。