【问题标题】：Pass js var into html block being added via appendTo将 js var 传递到通过 appendTo 添加的 html 块中
【发布时间】：2013-02-26 17:30:10
【问题描述】：

当有人单击按钮时，我将这个 html 注入到页面中。每次使用下面的 js 单击按钮时，都会再次附加 html。

<div style="display: none;">
    <div class="grab-me">
    <p>This is fieldset 1</p>
      <input name="foo[]" />
      <input name="bar[]" />
      <input name="oth[]" />
    </div>
 </div>

var count = 1;
  $(function(){
    $('.add-member').live("click", function(e){
        e.preventDefault(e);
        count += 1;
        var grab = $('.grab-me')
                .clone()
                .removeClass('grab-me')
                .appendTo('#register');

    });
 });

但我需要做的是它说“这是字段集 1”的地方，我需要每次将该数字增加 1，以便后续附加说这是字段集 2，这是字段集 3 等等。我看不到当它被克隆时，我如何将一个变量（我的 count var）传递到 html 块中以替换该数字。

这是一个 jsfiddle：http://jsfiddle.net/tzbgA/

任何帮助都会很棒！谢谢！！

【问题讨论】：

你可以使用innerHTML属性，给你的p标签一个类并设置数字。
考虑使用模板或绑定系统，例如 jsRender、Handlerbars 或 Knockout。
@harsha 但是考虑到它需要重复，所以该类将有多个 p 元素，这将如何工作？
你能加个jsfiddle.net
@howderek 是的，已经为您完成了。

标签： javascript jquery append clone

【解决方案1】：

添加跨度：

 <p>This is fieldset <span>1</span></p> 


   var count = 1;
      $(function(){
        $('.add-member').on("click", function(e){
            e.preventDefault(e);
            count += 1;
            var grab = $('.grab-me')
                    .clone()
                    .removeClass('grab-me')
                    .appendTo('#register');
            $('.span').html('count');

        });
     });

【讨论】：

【解决方案2】：

你可以给出你想换班的句子。然后使用 jQuery 选择器更改其中的文本。

<body>
  <button class="add-member">add more</button>
  <div style="display: none;">
    <div class="grab-me">
    <p class="count">This is fieldset 1</p>
      <input name="foo[]" />
      <input name="bar[]" />
      <input name="oth[]" />
    </div>
 </div>
  <div id="register">
  </div>
</body>

var count = 1;
$(function(){
    $('.add-member').on("click", function(e){
        e.preventDefault(e);        
        var grab = $('.grab-me')
                .clone()
                .removeClass('grab-me')
                .appendTo('#register')
        .find('p.count').html('This is fieldset '+count);
      count += 1;
    });
 });

【讨论】：

【解决方案3】：

var count = 1;
$(function(){
    $('.add-member').live("click", function(e){
        e.preventDefault(e);
        count += 1;
        var grab = $('.grab-me').clone();
        $(grab p).html('This is fieldset '+count).appendTo('#register');
    });
});

【讨论】：

【解决方案4】：

小提琴：http://jsfiddle.net/howderek/tzbgA/2/

这是一个使用 8 行代码的版本：

代码（Javascript）

var count = 1,
    html = ' <p>This is fieldset #</p><input name="foo[]"/> <input name = "bar[]"/> <input name = "oth[]"/>';
$(function () {
    $('.add-member').live("click", function (e) {
        e.preventDefault(e);
        document.getElementById("register").innerHTML += html.replace("#",++count);
    });
});

【讨论】：