Question

这可能没有得到很好的解释，但请耐心等待，我还包括一个小提琴，它将有助于解释我想要实现的目标。

所以我一直在研究一个连接文本字符串的小型网络应用程序（取自输入框和下拉框）。这是通过点击“生成”按钮来实现的，该按钮在后台运行函数以连接所述字符串。它工作正常，但我刚刚引入了一个“addRow”按钮，它使用JQuery克隆其中一个表单及其所有内容，然后更改行中每个元素的id（通过添加1，然后是2，然后3 ，取决于点击“+”按钮的次数。

一旦有多行，我如何遍历连接复制行的字符串的函数？我的代码可能会更好地解释这个：

JSFiddle [here] [1]

更新：

所以我修改了我的代码以使用输入/文本框的类，现在只是克隆表单（因为它们有唯一的ID）。我无法遍历每个表单实例来做“某事”（即连接字符串）！

这是一个更新的fiddle。实际连接字符串的代码已经完成，我只是不知道如何在JQuery中正确使用.each()函数！

Answer 1

首先我删除了你的内联点击和焦点处理程序......我们将用jQuery绑定它们。我还为所有输入添加了一个类，您可以调用焦点并模糊调用inFieldLabel以便于轻松绑定。

HTML

<div id="placement">
    <h3>Placement</h3>
    <form action="" id="placement-form" class="placement-form">
      <input type="text" class="site inFieldLabel" value="Site" title="Site" />
      <input type="text" class="placementdesc inFieldLabel" value="Placement description" title="Placement description" />
      <input type="text" class="placementtype inFieldLabel" value="Placement Type" title="Placement Type" />
      <input type="text" class="size inFieldLabel" value="Size" title="Size" />
      <input type="text" class="pricing inFieldLabel" value="Pricing" title="Pricing" />
      <select class="servetype" title="Serve Type">
        <option>STD – Standard trafficking type (ie, regular display banners)</option>
        <option>SSV – Site-served (no ad server tracking)</option>
        <option>PIX – Pixel</option>
        <option>CCD – Click command</option>
        <option>PCC – Pixel and Click command</option>
        <option>RMV – Rich Media Video</option>
        <option>RME – Rich Media Expand</option>
        <option>RMO – Rich Media Other</option>
      </select>
      <span class="placement_span"></span>
    </form>   
</div>
<input type="button" value="+" class="addRow" />
<input type="button" id="generate" value="Generate" />

所以现在我们定义了clickclear和clickrecall函数，用作绑定的hnadler。不确定你是否在原始代码中使用了它但是我添加了一个检查以确保它只在值是默认值时调用/清除（例如，orig。标签或空字符串）。

您遇到问题的大部分内容都在generatePage函数中。

JS

  var uniqueId = 1;
  var generatePage = function(evt){
    $('.placement-form').each(function(i, frm){
      frm = $(frm); // wrap in jQuery
      // i is the interation counter
      // frm is the form element
      var site, placement_desc, placementtype, size, pricing, servetype;    
      site = frm.find(".site").val();
      placement_desc = frm.find(".placementdesc").val();
      placementtype = frm.find(".placementtype").val();
      size = frm.find(".size").val();
      pricing = frm.find(".pricing").val();
      servetype = frm.find(".servetype").val();
      var content = '<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype;
      frm.find('.placement_span').html(content);
    });
  };

  var clickclear = function (evt){
    var ele = $(this);
    evt.preventDefault();

    if(ele.val() == ele.attr('title')){
      ele.val(''); // if the value is a "label" then clear it for the user
    }

    return false;
  };

  var clickrecall = function(evt) {
    var ele = $(this);
    evt.preventDefault();


    if(ele.val() == '') {
      // if the user hasnt entered any text then revert to the "label"
      ele.val(ele.attr('title'));
    }

    return false;
  };
  $('.placement-form .inFieldLabel').focus(clickclear).blur(clickrecall);

  $('.addRow').click(function() {
      var formCopy = $("#placement-form").clone(true);
      var formCopyId = 'placement-form'+uniqueId;
      formCopy.attr('id',formCopyId);
      $('#placement').append(formCopy);
      uniqueId++;
  });

  $('#generate').click(generatePage);

查看实际操作：http://jsfiddle.net/JUfgd/

但是，我不确定您为什么要尝试组合这些字符串或为什么要使用多个表单。我假设你需要在某个时刻某处提交所有这些数据并且为了这样做，实际上有一个单独的形式，因为数组表示法具有name属性（例如。name="site[0]"）会更有意义。然后，当您提交时，您可以在服务器端循环，将所有内容组合在一起。当然，克隆时很难处理，所以另一种方法是将实际输入留在表单之外，然后使用js组装数据，类似于你已经在做的事情 - 只有使用更有意义JSON用于此而不是您自己的自定义字符串序列化。如果您需要有关此帖子的更多信息，请提出新问题。

我要做的是为表单添加一个唯一的id或者为具有唯一id的表单添加一个包装容器，然后我会使用类而不是Id来表示输入/控件。通过这种方式，您可以克隆表单或其容器以及所有子项，然后jsut更改该顶级元素上的一个id。然后，您可以使用$(yourUniqueId .theInputClass)之类的选择器，这样可以更轻松地进行管理。

然后你可以迭代每个表单...为了容易，我可能会在表格中添加一个类jsut，以防在同一页面上有其他非相关表单，所以它会是这样的：

$('.placementForm').each(function(i, formEle){
   // do stuff to the form
});

Answer 2

您编写的用于克隆所有元素的代码：

$('#' + formId).find('input,select').each(function(){
     $(this).attr('id', $(this).attr('id') + uniqueId);
});

已经在右边的邻居。既然你正在使用jQuery，为什么不做这样的事情来得到一个包含你输入的所有值的字符串并选择：

var str = '';
$('#' + formId).find('input, select').each(function(){
     str += $(this).val();
});

当然，如果您想要选择输入并选择页面上的任何位置，而不仅仅是该表单，您可以这样做：

var str = '';
$('input, select').each(function(){
     str += $(this).val();
});

迭代DOM，然后连接生成的文本值

2 个答案: