Klon php foreach Elemente mit Javascript

Question

Ich habe eine foreach, die eine Liste von Links jetzt in der oberen rechten Ecke jedes Links erzeugt Ich habe eine Klon-Schaltfläche, die beim Klonen dieses Element klonen sollte. Der folgende Code in seinem aktuellen Format.

<?php 
     foreach ($result as $value) { 
     list($classname, $origin, $name) = explode('_', $value); 
     $classname = trim($classname, '[]'); 
     $origin = trim($origin, '[]'); 
     $name  = pathinfo($name, PATHINFO_FILENAME); 
     echo "<li class='audiofile " . $name . " " . $classname . "' id='" . $value . "'>". 
       "<a class='btn_clone' id='' onclick='repeat()'>#</a>". 
       "<a href='" . $directoryname . "/" . $value . "'>". 
        "<img src='images/avatars/" . $classname . ".jpg'>". 
        "<div class='audiotext'>". 
        "<span class='audiotitle'>" . $name . "</span>". 
        "<span class='audioorigin'>" . $origin . "</span>". 
        "</div>". 
       "</a>". 
       "</li>"; 
     } 
    ?> 

Dies geht zusammen mit dieser js weiter unten in der Datei.

var i = 0; 
    var original = document.getElementById('<?php echo $value ?>'); 

    function repeat() { 
     var clone = original.cloneNode(true); 
     clone.id = "clone" + ++i; 
     original.parentNode.appendChild(clone); 
    } 

Derzeit wird es klonen nur das letzte Element der Liste unabhängig davon, welche Artikel Sie die Klon-Schaltfläche geklickt. Und das ist, glaube ich, weil die $value für die var original ist einfach das letzte Element der foreach.

So, wie es mit den generierten IDs in foreach arbeiten. Oder wenn es einen anderen Weg gibt, um jeden Gegenstand zu klonen, aber die foreach intakt zu behalten, würde ich es wirklich schätzen, es zu hören. Vielen Dank im Voraus für die Hilfe.

Answer 1

Sie können das Element auswählen, indem this.parentElement usin wenn das Click-Ereignis eintritt:

var j = 0; 
function repeat(event) { 
    var original = event.target.parentNode; 
    var clone = original.cloneNode(true); 
    clone.id = "clone" + ++j; 
    original.parentElement.appendChild(clone); 
} 

Und Sie müssen die event in Ihrem onclick Attribut hinzufügen:

//....... 
"<a class='btn_clone' id='' onclick='repeat(event)'>#</a>". 
//.......         ^add this 

Ich hoffe, dies wird Ihnen helfen .