2

Rails 3 アプリでネストされたフォーム ジェムを使用しています: https://github.com/ryanb/nested_form。フォームで「オーディエンス フィールド」を追加/削除できます。オーディエンス モデルはアップロード モデルに属します。

私ができるようにしたいのは、オーディエンス フィールドがフォームに追加された回数を数えることです。したがって、たとえば、フォームは最初、オーディエンス フィールドの上に「Audience 1」と表示されます。別のオーディエンス フィールドを追加すると、「オーディエンス 2」が表示されます。

アプリケーション.js

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

私は何を間違っていますか？

編集：

アプリケーション.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>
4

2 に答える 2

1

コメントでは書式設定コードが許可されていないため、別の回答を作成します

それがあなたが使用しているファイルである場合、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));
    });

});
于 2012-06-06T07:11:31.643 に答える
0

これ$("span").text("Audience " + n);により、Audience n がサイトの各スパンの内部テキストとして配置されます。その場合span、div.audciencefields正しいコードは

$("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 でスパンを見つけ、セットから番号を設定します。

于 2012-06-05T19:39:24.183 に答える