Question

我有一个foreach，它会在每个链接的右上角生成一个链接列表，我得到一个克隆按钮，单击该按钮时应克隆该元素。以下代码采用当前格式。

    <?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>";
      }
    ?>

这与文件中的这个js一起进行。

    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);
    }

目前，无论您点击克隆按钮的哪个项目，它都只会克隆列表的最后一项。我认为这是因为用于变种$value的{{1}}只是original的最后一项。

那么如何使它与foreach中生成的id一起使用。或者，如果有另一种方法可以使每个项目克隆但保持foreach完好无损，我会非常感谢它听到它。在此先感谢您的帮助。

Answer 1

当点击事件发生时，您可以通过this.parentElement选择元素：

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

您必须在event属性中添加onclick：

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

我希望这会对你有所帮助。

使用javascript克隆php foreach元素

1 个答案: