在 Rails 3 中添加嵌套表单的计数器？

Question

我在我的 Rails 3 应用程序中使用嵌套表单 gem：https://github.com/ryanb/nested_form。我可以在我的表单中添加/删除“受众领域”。受众模型属于上传模型。

我希望能够做的是计算在表单中添加受众字段的次数。因此，例如，表单最初将在受众字段上方显示“受众 1”。如果我添加另一个受众字段，则会显示“受众 2”，依此类推。

application.js

var n = $("div.audiencefields").length;
  $("span").text("Audience " + n);

我做错了什么？

编辑：

application.js

  $("#removelink").hide().filter(":first-child").show();

  $("div.audiencefields span").each(function(index, element) {
  $(this).text("Audience " + (index + 1));});

nested_form.js

jQuery(function($) {
window.NestedFormEvents = function() {
this.addFields = $.proxy(this.addFields, this);
this.removeFields = $.proxy(this.removeFields, this);
};

NestedFormEvents.prototype = {
addFields: function(e) {
  // Setup
  var link    = e.currentTarget;
  var assoc   = $(link).attr('data-association');            // Name of child
  var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template

  // Make the context correct by replacing new_<parents> with the generated ID
  // of each of the parent objects
  var context = ($(link).closest('.fields').closestChild('input:first').attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');


  // context will be something like this for a brand new form:
  // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
  // or for an edit form:
  // project[tasks_attributes][0][assignments_attributes][1]
  if (context) {
    var parentNames = context.match(/[a-z_]+_attributes/g) || [];
    var parentIds   = context.match(/(new_)?[0-9]+/g) || [];

    for(var i = 0; i < parentNames.length; i++) {
      if(parentIds[i]) {
        content = content.replace(
          new RegExp('(_' + parentNames[i] + ')_.+?_', 'g'),
          '$1_' + parentIds[i] + '_');

        content = content.replace(
          new RegExp('(\\[' + parentNames[i] + '\\])\\[.+?\\]', 'g'),
          '$1[' + parentIds[i] + ']');
      }
    }
  }

  // Make a unique ID for the new child
  var regexp  = new RegExp('new_' + assoc, 'g');
  var new_id  = new Date().getTime();
  content     = content.replace(regexp, "new_" + new_id);

  var field = this.insertFields(content, assoc, link);
  $(link).closest("form")
    .trigger({ type: 'nested:fieldAdded', field: field })
    .trigger({ type: 'nested:fieldAdded:' + assoc, field: field });
  return false;
},
insertFields: function(content, assoc, link) {
  return $(content).insertBefore(link);
},
removeFields: function(e) {
  var link = e.currentTarget;
  var hiddenField = $(link).prev('input[type=hidden]');
  hiddenField.val('1');
  // if (hiddenField) {
  //   $(link).v
  //   hiddenField.value = '1';
  // }
  var field = $(link).closest('.fields');
  field.hide();
  $(link).closest("form").trigger({ type: 'nested:fieldRemoved', field: field });
  return false;
}
};

  window.nestedFormEvents = new NestedFormEvents();
$('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
$('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);
});


// http://plugins.jquery.com/project/closestChild
/*
* Copyright 2011, Tobias Lindig
*
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
*/
(function($) {
$.fn.closestChild = function(selector) {
// breadth first search for the first matched node
if (selector && selector != '') {
  var queue = [];
  queue.push(this);
  while(queue.length > 0) {
    var node = queue.shift();
    var children = node.children();
    for(var i = 0; i < children.length; ++i) {
      var child = $(children[i]);
      if (child.is(selector)) {
        return child; //well, we found one
      }
      queue.push(child);
    }
  }
}
return $();//nothing found
};
   })(jQuery);

new.html.erb

  <%= f.fields_for :audiences do |audience_form| %>
  <div class="audiencefields">
  <span></span>
  <p>   
    <%= audience_form.label :number_of_people %><br />
    <%= audience_form.text_field :number_of_people %>
  </p>
  <p>
    <%= audience_form.label :gender %><br />
    <%= audience_form.text_field :gender %>
  </p>
  <p>
    <%= audience_form.label :ethnicity %><br />
    <%= audience_form.text_field :ethnicity %>
  </p>
  <p>
    <%= audience_form.label :age %><br />
    <%= audience_form.text_field :age %>
  </p>
  </div>

  <%= audience_form.link_to_remove "Remove this", :id => "removelink" %>
  <% end %>

  <p><%= f.link_to_add "Add this", :audiences, :id => "addlink" %></p>

Answer 1

我创建了另一个答案，因为 cmets 不允许格式化代码

如果 that 是您正在使用的文件，那么在第 69-71 行您可以找到以下代码

window.nestedFormEvents = new NestedFormEvents();
$('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
$('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);

这会将点击事件绑定到添加和删除链接。在您的自定义脚本中以相同的方式绑定事件。完成上述操作后将执行。所以你的代码应该是这样的

$('form a.add_nested_fields, form a.remove_nested_fields').live('click', function(){

    $("div.audiencefields span").each(function(index, element) {
        //index starts with 0
        $(this).text("Audience " + (index + 1));
    });

});

Answer 2

此$("span").text("Audience " + n); 将受众 n 作为您网站上每个跨度的内部文本。我假设你在div.audciencefields 中有span 在这种情况下正确的代码是

$("div.audiencefields span").each(function(index, element) {

    //index starts with 0
    $(this).text("Audience " + (index + 1));
});

上面将遍历 div.audiencefields 中的每个跨度，并将正确的文本放入每个元素中。

如果您只想将数字添加到可以使用的新元素中

var audience = $("div.audiencefields");
audience.last().find('span').text("Audience " + audience.length());

上面会在最后一个 div 中找到带有 Audiencefields 类的 span，并将数字设置在集合之外。