javascript - 迭代 DOM，然后连接结果文本值

Question

这可能没有很好地解释，但请耐心等待，我还提供了一个 fiddle ，它将有助于解释我想要实现的目标。

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

一旦有多于一行，如何迭代连接要复制的行的字符串的函数？我的代码可能会更好地解释这一点:

JSFiddle [此处][1]

更新:

因此，我修改了代码以使用输入/文本框的类，现在只是克隆表单(因为它们具有唯一的 ID)。我在迭代每个表单实例来执行“某些操作”(即连接字符串)时遇到问题!

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

Answer 1

首先，我删除了您的内联单击和焦点处理程序...我们将使用 jQuery 绑定(bind)它们。我还向所有您将其称为焦点和模糊的输入添加了一个名为 inFieldLabel 的类，以方便绑定(bind)。

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 函数来用作绑定(bind)的 hnadler。不确定您的原始代码中是否有它，但我添加了一个检查以确保它仅在值是默认值(例如原始标签或空字符串)时调用/清除。

您遇到的大部分问题都在 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 作为输入/控件。通过这种方式，您可以克隆表单或其容器以及所有子元素，然后只需更改该顶级元素上的一个 id。然后您可以使用像 $(yourUniqueId .theInputClass) 这样的选择器，这使得管理变得更加容易。

然后你可以迭代每个表单...为了方便我可能也会向表单添加一个类，以防同一页面上有其他不相关的表单，所以它会是这样的:

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