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

Question

我目前正在开发一个网站，可以轻松修改 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)

问候，

安德鲁

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

感谢您的回复。不幸的是，它对于 JS fiddle 来说有点大。我只是一个菜鸟，所以这可能不是最优雅的方法，但我使用了 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 并通过用户输入为其设置动画的方法;-)

Answer 1

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

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

撇开 jQuery 重写不谈，这会执行三个操作，尽管最后一个操作可能超出要求。

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

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

至于“frame_”if语句

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

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