Question

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

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

我想知道是否有办法让按钮来创建新元素和jquery让它运行。目前我已尝试使用按钮设置变量值以增加，然后使用“for”循环来创建新的关键帧元素。

是否可以使用新关键帧附加以前的关键帧

这是我在为输入字段创建DOM节点时需要设置的事项示例，但我遇到的主要问题是增加“i”的值并仅复制代码一次。

////////// TOP TEXT INPUT ///////////

    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)

////////// TOP TEXT INPUT ///////////

    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)

此致

安德鲁

EDIT --------------------------

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

function 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”方法（采用位置参数）一个新的SampleObject，其索引值为1 +（静态成员）SampleObject.set，set变量用于存储新对象因为他们被创造了。这可能没有必要，但我想你以后想要与他们互动或附上活动。

至于“frame_”if语句

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

假设迭代地创建帧，这将返回n的适当值。

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

1 个答案: