Javascript 复制脚本并递增id名称以动态添加输入内容

我目前正在一个网站上工作，可以轻松地修改css属性并使用jquery制作动画。然后，页面将输出代码，供用户复制并粘贴到他们的工作中

我希望动态添加输入字段，以便用户可以在动画的关键帧中输入自己的参数

我想知道是否有一种方法可以让一个按钮来创建新元素并让jquery运行。目前，我已尝试使用按钮将变量值设置为增量，然后使用for循环来创建新的关键帧元素

是否有方法将以前的关键帧附加到新的关键帧

这是我在为输入字段创建DOM节点时需要设置的示例，但我面临的主要问题是增加I的值，并且只复制一次代码

//////////顶部文本输入///////////

    var newTop = document.createElement('input')

    newTop.type = "text"
    newTop.id ="animation_" + i + "_top" // i = 1
    newTop.size="10" 
    newTop.value="100" 
    newTop.name="animation_" + i +"_top" // i = 1
    newTop.textContent = "top";

    var refTopSibling = document.getElementById('frame_1')
    var refTopParent = refTopSibling.parentNode

    refTopParent.appendChild(newTop)

    var newLeft = document.createElement('input')

    newLeft.type = "text"
    newLeft.id ="animation_" + i + "_left" // i = 2
    newLeft.size="10" 
    newLeft.value="100" 
    newLeft.name="animation_" + i +"_left" // i = 2
    newLeft.textContent = "left";


    var refTopSibling = document.getElementById("animation_" + i + "_top")
    var refTopParent = refTopSibling.parentNode

    refTopParent.appendChild(newLeft)

//////////顶部文本输入///////////

    var newTop = document.createElement('input')

    newTop.type = "text"
    newTop.id ="animation_" + i + "_top" // i = 1
    newTop.size="10" 
    newTop.value="100" 
    newTop.name="animation_" + i +"_top" // i = 1
    newTop.textContent = "top";

    var refTopSibling = document.getElementById('frame_1')
    var refTopParent = refTopSibling.parentNode

    refTopParent.appendChild(newTop)

    var newLeft = document.createElement('input')

    newLeft.type = "text"
    newLeft.id ="animation_" + i + "_left" // i = 2
    newLeft.size="10" 
    newLeft.value="100" 
    newLeft.name="animation_" + i +"_left" // i = 2
    newLeft.textContent = "left";


    var refTopSibling = document.getElementById("animation_" + i + "_top")
    var refTopParent = refTopSibling.parentNode

    refTopParent.appendChild(newLeft)

问候,

安德鲁

编辑-------------

谢谢你的回复。对于JS小提琴来说，它有点大。我只是一个noob，所以这可能不是最优雅的方法，但我使用了if语句来增加变量在每次按下时的当前值。。。不幸的是，它不是动态的，但我有足够的选项允许将11个动画关键帧动态添加到DOM中

函数addFrame{

var n;

if (document.getElementById('frame_1')){n=2};
if (document.getElementById('frame_2')){n=3};
if (document.getElementById('frame_3')){n=4};
if (document.getElementById('frame_4')){n=5};
if (document.getElementById('frame_5')){n=6};
if (document.getElementById('frame_6')){n=7};
if (document.getElementById('frame_7')){n=8};
if (document.getElementById('frame_8')){n=9};
if (document.getElementById('frame_9')){n=10};
if (document.getElementById('frame_10')){n=11};

//剩下的代码在这里

}

---

现在，找出一种动态绘制svg并使用用户输入为其设置动画的方法-

这不一定是最好的实现，但我相信它满足您的要求

function SampleObject(position, i)
{
    this.posString = "new" + position;
    $(this[this.posString] = document.createElement("input"))
            .css({  type: "text",
                    id: "animation_" + i + "_" + position,
                    size: "10" ,
                    value: "100" ,
                    name: "animation_" + i +"_" + position,
                    textContent: position
                });

    $("#frame_1").parent().append(el);
}

//Public methods
SampleObject.prototype.getInput = function()
{
    return this[this.posString];
}
//Static members
SampleObject.set = [];

//Static methods
SampleObject.new = function(position);
{
    this.set.push(new SampleObject(position, this.set.length + 1));
}

//Quick test
SampleObject.new("top");

撇开jqueryrewrite不谈，这有三个动作，尽管最后一个动作可能超出了需求

1而不是为每个位置编写一个新函数对象的构造函数采用一个位置字符串任何字符串都可以，但对于您的目标位置似乎合适。该字符串被附加到new以形成新的，用于在存储的post中创建一个根据当前多函数方法命名的对象成员新的输入对象-我个人认为成员命名是多余的，但我不知道该项目。对象具有用于返回输入表单的get方法

2使用静态Sample.new方法，该方法采用位置参数一个索引值为1+静态成员SampleObject.set的新SampleObject，set变量用于存储创建的新对象。这可能不是必需的，但我想您稍后会希望与他们交互或附加事件

至于frame_uif语句

$("[id^=frame_]").length() + 1  

---

假设帧总是以迭代方式创建，这将为n返回适当的值

你能不能制作一把小提琴，这样它就可以演奏了？你想让左边的和上面的人分享我吗？问题是您不想复制所有的代码吗？为什么不为所有常见的CSS使用一个类名，然后为任何事件处理程序使用动态for.on和类名？因此您只需要知道如何构造for语句以正确迭代，以及如何在迭代过程中只执行一次代码/