查找和使用Javascript

Question

我有一段HTML的那個被一遍又一遍地重複使用jQuery（當用戶點擊「添加」，它創建另一個塊更換號碼：

<p> 
<label for="question[1][text]">Question: <span class="req">*</span></label> 
<input name="question[1][text]" id="A_Question_1" value="" type="text" class="f_input" /> 
</p> 

<p> 
<label for="question[1][type]">Type: <span class="req">*</span></label> 
<input name="question[1][type]" id="A_Type_1" type="text" class="f_input" /> 
</p> 

我需要增加每個號碼1該塊的每次迭代，從而使下一個塊自動創建：

<p> 
<label for="question[2][text]">Question: <span class="req">*</span></label> 
<input name="question[2][text]" id="A_Question_1" value="" type="text" class="f_input" /> 
</p> 

<p> 
<label for="question[2][type]">Type: <span class="req">*</span></label> 
<input name="question[2][type]" id="A_Type_1" type="text" class="f_input" /> 
</p> 

我敢肯定，這很簡單，但我不跟Regexs等足夠的有經驗的工作如何去做。謝謝:)

Answer 1

您可以將模板存儲在一些帶有ID的佔位符的隱藏div中（如#id#）。
然後，您可以用javascript中的實際id替換佔位符。像

var html = $('#template').html().replace('#id#', id); 
list.append(html); 

下一個ID可以從當前的兒童數量計算。

var id = list.children().length + 1; 

Answer 2

JQote爲JQuery提供了HTML模板庫。它被包含其參數的對象調用。

<script type="text/html" id="template"> 
<![CDATA[ 
    <p> 
     <label for="question[<%= this.iteration %>][text]">Question: <span class="req">*</span></label> 
     <input name="question[<%= this.iteration %>][text]" id="A_Question_<%= this.iteration %>" value="" type="text" class="f_input" /> 
    </p> 

    <p> 
     <label for="question[<%= this.iteration %>][type]">Type: <span class="req">*</span></label> 
     <input name="question[<%= this.iteration %>][type]" id="A_Type_<%= this.iteration %>" type="text" class="f_input" /> 
    </p> 
]]> 
</script> 

然後爲你add()功能的一部分：

<script type="text/javascript"> 
    var globalIteration = 0 

    function add() { 

     <...your code...> 

     globalIteration++; 
     var obj= { 
     iteration: globalIteration, 
     <...any other variables to insert into template...> 
     }; 
     $('#template').jqote(obj).appendTo($('body')); 
    } 
</script> 

Answer 3

像這樣的東西應該工作：

$(document).ready(function() { 
    $container = $('#container'); 
    $button = $('#button') 
    .data('clicked', 0) 
    .click(function() { 
    var clicked = $button.data('clicked'); 
    $container.append('<p><label for="question[' + clicked + '][text]">Question: <span class="req">*</span></label><input name="question[' + clicked + '][text]" id="A_Question_' + clicked + '" value="" type="text" class="f_input" /></p>'); 
    $button.data('clicked', clicked + 1); 
    }); 
}); 

Answer 4

這取決於你如何結合你的函數。如果你在JavaScript中綁定它，我可能會使用該數字作爲添加鏈接的僞造屬性。

喜歡的東西

'<a href="javascript:;" question_number="1">Add</a> 

替換[1] $（本）.attr在你的JavaScript和結束時（ 'QUESTION_NUMBER'）加$（本）.attr（ 'QUESTION_NUMBER'，nextId）

一個更好的解決方案可能是將它粘貼到鏈接的id並在javascript完成時更改id，如果您通過id綁定，那麼這不是一個好的解決方案。

如果你正在使用類似

<a href="javascript:;" onclick="my_func();">Add</a/> 

修改你的函數取一個參數，並在JavaScript代碼類似於上面到底改變放慢參數直接結合的onclick在html。我也喜歡安迪的解決方案。

Answer 5

以下是我如何完成它http://pintum.com.au/goCruising/details.html#tabs-2 單擊添加按鈕。

它使用jQuery，jtemplates插件和JSON。請看它的工作原理。