1

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

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

我想知道是否有办法让按钮创建新元素和 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 并使用用户输入对其进行动画处理；-)

4

1 回答 1

0

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

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 rewrite 除了这三个动作之外，尽管最后一个可能超出要求。

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

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

至于“frame_”if 语句

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

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

于 2012-10-13T02:35:33.557 回答