複製腳本並增加id名稱以動態添加輸入內容

我目前正在網站上使用jquery輕鬆修改css屬性和動畫效果。然後頁面將輸出用戶的代碼複製並粘貼到他們的工作中。複製腳本並增加id名稱以動態添加輸入內容

我想動態添加輸入字段，以便用戶可以在「關鍵幀」爲動畫輸入自己的參數。

我想知道如果有一種方法可以有一個按鈕來創建新的元素和jQuery的把它運作。目前我已經嘗試設置一個變量值來增加按鈕，然後有一個「for」循環來創建新的關鍵幀元素。

有沒有辦法到以前的關鍵幀新的關鍵幀

這個附加是我需要創建輸入字段的DOM節點時設置的東西的樣本，但我遇到的主要問題是增加「我」的價值和複製代碼只有一次。

////////// 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)

問候，

安德魯

編輯---------------------- ----

感謝您的回覆。不幸的是，它對於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和與用戶輸入的動畫它; - ）

來源

2012-10-10 synthet1c

你能解釋一下嗎？ –

你可以創建一個小提琴，以便它可以工作。 –

你想讓我在左派和上司之間分享嗎？問題是你不想複製所有的代碼？ – Suroot

這未必是最好的實現，但我相信它符合您的要求。

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），而不是寫一個新的功能爲每個位置的對象的構造函數需要一個位置的字符串（任何字符串將被罰款，但你的目標職位，似乎貼切）。該字符串被附加到「新」以形成「新」，用於創建一個對象成員根據存儲新輸入對象的帖子中的當前多功能方法命名 - 我個人認爲成員命名是多餘的但我不知道這個項目。該對象具有返回輸入表單的get方法。

2）使用靜態「Sample.new」方法（需要的位置參數），其具有1 +（靜止構件）SampleObject的索引值的新SampleObject。set，set變量用於在創建新對象時存儲它們。這可能不是必需的，但我想你會想要稍後與它們交互或附加事件。

至於「frame_」 if語句

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

假設幀總是反覆地創建這將返回n的適當的值。

來源

2012-10-13 02:35:33 CBusBus

複製腳本並增加id名稱以動態添加輸入內容

回答

相關問題