Question

我有一段HTML使用jQuery反复重复（当用户点击'add'时会创建另一个块：

<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

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 2

您可以将模板存储在一些带有占位符的隐藏div中（类似#id#）然后，您可以用javascript中的实际ID替换占位符。像

这样的东西

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

可以从当前的孩子数量计算下一个ID。

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

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>

在你的javascript中用$（this）.attr（'question_number'）替换[1]并在最后添加$（this）.attr（'question_number'，nextId）

更好的解决方案可能是将其添加到链接的id并在javascript完成时更改id，如果你通过id绑定则不是一个好的解决方案。

如果您使用类似

之类的内容直接在html中绑定onclick

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

修改你的函数以获取参数并更改类似于上面的javascript末尾的参数。我也喜欢安迪的解决方案。

Answer 5

我是如何做到的http://pintum.com.au/goCruising/details.html#tabs-2 单击“添加”按钮。

它使用jQuery，jtemplates插件和JSON。只需查看其工作原理的来源。

使用Javascript查找并替换数字

5 个答案: