Wie man dynamische Klassen mit PHP erstellt und mit jQuery verwendet

Question

Ich werde ein PHP-Snippet erstellen oder kann als WordPress-Code-Snippet betrachtet werden, und möchte eine dynamische CSS-Klasse jedes Mal, wenn das Modul auf dem Frontend geladen, und Diese Klasse wird von jQuery verwendet, um mein Frontend zu stylen. Hier

ist das Szenario:

suppose erstmals Modul auf Frontend geladen Lassen, soll es eine Klasse, wie: module-front-end-123 und ich kann genau diese Klasse von jQuery verwenden, um seinen Inhalt Stil nach Daten innerhalb dieses leben nur Modul.

Und jetzt angenommen, ein anderes Modul des gleichen Typs hinzugefügt jetzt sollte es einige Klasse wie module-front-end-124 generieren und ich werde diese Klasse von jQuery wieder verwenden, um auch sein Styling.

Vorteil dieses Ansatzes wird dies sein, ich werde mein Code-Snippet nur einmal schreiben und wenn jemals Modul geladen wird, werde ich seine eigene Klasse bekommen und jQuery-Code wird auf diesem Modul und für andere Modul-Stil wird für andere Module unabhängig arbeiten.

kann ich diese Klasse von PHP erstellen, aber wissen nicht, wie diese Klasse in jQuery zu verwenden, oder irgend etwas wie das ...

Kann mir jemand bitte führen? Ich möchte nur einmal meinen Stil schreiben und jedes Mal, dass das auf die Klasse angewendet wird.

Answer 1

Innerhalb Ihres PHP-Codes können Sie jede Variable verwenden, die den Wert erhöht, nachdem jedes Code-Snippet eingefügt wurde.

Auf dem PHP-Code hinzu:: Wie weiter unten

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

Es wird nur eine Variable des globalen Bereichs erstellen und wenn sie leer wird es auf 0 gesetzt Perfekt, jetzt nur noch diese Variable verwenden in Ihrer hTML-Klasse wie unten dargestellt:

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

nun in ersten Einbringungs es module-front-end-0 erzeugen wird und in der zweiten Einfügung wird es module-front-end-1 und so weiter bei jedem Einsetzen des Moduls werden.

Jetzt nur noch eine weitere Klasse hinzufügen, wie get-Daten und Ihr Code wie unten gezeigt werden:

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

Also, Ihre HTML-Teil Teil bewegen getan jetzt JS, Innerhalb Ihrer JS-Datei fügen Sie einfach Code wie siehe unten:

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

So wird es die Arbeit für Sie erledigen. Hinweis: .append('<p>this is my data</p>'); ist nur zum Beispiel zu zeigen, dass, wie Sie in jeder Ihrer dynamischen Klasse gehen können. Sie können tun, was auch immer Sie mit Ihrem Code dort tun möchten.