javascript - 如何通过单击按钮动态创建对象

Question

我正在尝试创建 2 行 6 个矩形(被视为一个对象)。

我还想添加一个加号按钮，这样当用户单击任一端时，一组新的矩形会出现在原始矩形的上方或下方。 (取决于他们点击的是哪个加号按钮)

所以我正在努力实现以下目标:

到目前为止我已经尝试/发现了什么:

$(function () {
    $(".repeat").on('click', function (e) {
        e.preventDefault();
        var $self = $(this);
        $self.before($self.prev('table').clone());
        //$self.remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <div class="repeatable">
        <table border="1">
            <tr>
                <td>
                    <input type="text" name="userInput[]" />
                </td>
            </tr>
        </table>
        <button class="repeat">Add Another</button>
    </div>
    <input type="submit" value="Submit" />
</form>

上面的例子只适用于表单。有谁知道我怎样才能让这项工作达到我想要的效果？

Answer 1

我修改了您的代码以允许添加到顶部或添加到下方。

我编辑了您的事件监听器以检查按钮是否具有特定类。如果是这样，请在上方或下方添加。它还会监听“body”点击，因为新的 DOM 元素不会附加事件监听器:

$("body").on('click', ".repeat", function (e) { //other stuff here}

此外，更改了您的 HTML，使其不依赖于“表单”，只要类仍然存在，您就可以换出元素类型。

$(function () {
    $("body").on('click', ".repeat", function (e) {
        e.preventDefault();
        var $self = $(this);
        var $parent = $self.parent();
        if($self.hasClass("add-bottom")){
          $parent.after($parent.clone());
        } else {
          $parent.before($parent.clone());
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  <div class="container">
    <div class="repeatable">
      <button class="repeat add-top">Add above</button>
        <table border="1">
            <tr>
                <td>
                    <input type="text" name="userInput[]" />
                </td>
            </tr>
        </table>
        <button class="repeat add-bottom">Add below</button>
    </div>
  </div>