1

我有一个部分形式如下：

  =simple_form_for(user, :validate => true, :namespace => namespace, :html => {:class => 'form form-inline'}) do |user|   
    =user.input :name, placeholder: 'Enter your name...', :label => false, input_html: { class: "quote-form-field open_#{namespace}" }  
    =user.input :email, placeholder: 'Enter your email...', :label => false,input_html: { class: "quote-form-field open_#{namespace}" }  
    =user.submit 'Get Your Free Quote',:class => 'btn quote-form-submit', :id => "submit_button_#{namespace}"
    .accordion
      .accordion-group  
        .accordion-body.collapse{:id => namespace}
          .accordion-inner
            =user.simple_fields_for :submissions do |s|
              =s.input :due_date, :as => :string, :label=> false, :placeholder => "Due Date",input_html: { class: 'datepicker quote-form-field'}
              =s.input :work_type, :label=> false, collection: [ "Proofreading", "Editing",],prompt: "Editing or Proofreading?",input_html: {class: 'quote-form-dropdown-field'}
              =s.input :sample_text, :label=> false,:placeholder => "Paste a sample of your work here. Minimum 250 words",input_html: {class: 'quote-form-text-field'}
              =s.input :notes, :label => false,:placeholder => "Any additional details we should know", input_html: {class: 'quote-form-short-text-field'}
              =s.input :word_count, placeholder: "Enter the total word count...", :label => false,input_html: {class: 'quote-form-field'} 
            =user.submit 'Get Your Free Quote',:class => 'btn quote-form-submit'

我使用 :namespace 属性是因为我在同一页面上有两个相同的表单。

我将部分称为如下：

=render 'shared/quote_form', :user => @user, :namespace => 'first_form'

=render 'shared/quote_form', :user => @user, :namespace => 'second_form'

表单呈现如下：

<form accept-charset="UTF-8" action="/users" class="simple_form form form-inline" data-validate="true" id="first_form_new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="SLxFqS6qw9bNQ6D23iD1ptvt0EsK/PK1mzYwCkbK0FU=" /></div><div class="control-group string required user_name"><div class="controls"><input class="string required quote-form-field open_first_form" id="first_form_user_name" name="user[name]" placeholder="Enter your name..." type="text" /></div></div>
<div class="control-group email required user_email"><div class="controls"><input class="string email required quote-form-field open_first_form" id="first_form_user_email" name="user[email]" placeholder="Enter your email..." type="email" /></div></div>
<input class="btn quote-form-submit" id="submit_button_first_form" name="commit" type="submit" value="Get Your Free Quote" />
<div class='accordion'>
<div class='accordion-group'>
<div class='accordion-body collapse' id='first_form'>
<div class='accordion-inner'>
<div class="control-group string required user_submissions_due_date"><div class="controls"><input class="string required datepicker quote-form-field" id="first_form_user_submissions_attributes_0_due_date" name="user[submissions_attributes][0][due_date]" placeholder="Due Date" type="text" /></div></div>
<div class="control-group select required user_submissions_work_type"><div class="controls"><select class="select required quote-form-dropdown-field" id="first_form_user_submissions_attributes_0_work_type" name="user[submissions_attributes][0][work_type]"><option value="">Editing or Proofreading?</option>
<option value="Proofreading">Proofreading</option>
<option value="Editing">Editing</option></select></div></div>
<div class="control-group text required user_submissions_sample_text"><div class="controls"><textarea class="text required quote-form-text-field" id="first_form_user_submissions_attributes_0_sample_text" name="user[submissions_attributes][0][sample_text]" placeholder="Paste a sample of your work here. Minimum 250 words">
</textarea></div></div>
<div class="control-group text optional user_submissions_notes"><div class="controls"><textarea class="text optional quote-form-short-text-field" id="first_form_user_submissions_attributes_0_notes" name="user[submissions_attributes][0][notes]" placeholder="Any additional details we should know">
</textarea></div></div>
<div class="control-group integer optional user_submissions_word_count"><div class="controls"><input class="numeric integer optional quote-form-field" id="first_form_user_submissions_attributes_0_word_count" name="user[submissions_attributes][0][word_count]" placeholder="Enter the total word count..." step="1" type="number" /></div></div>
<input class="btn quote-form-submit" name="commit" type="submit" value="Get Your Free Quote" />
</div>
</div>
</div>
</div>
</form>

我定位可折叠元素和按钮，如下所示：

  // open the form for the first two fields
    $(".open_first_form").focus(function(){
        $('#first_form').collapse('show');
        $('#submit_button_first_form').hide();
        });  

    // open the second form for the first two fields
    $(".open_second_form").focus(function(){
        $('#second_form').collapse('show');
        $('#submit_button_second_form').hide();
        });

我看到我在这里有一些严重的重复，但作为一个使用 jquery 的 NOOB，我不知道如何清理它。

任何帮助表示赞赏。

4

1 回答 1

2

使用open_form代替open_first_form; 给 上课submit_button，#submit_button_first_form然后：

$('.open_form').on('focus', function(){
  var $form = $(this).closest('form')
  $form.find('.accordion-body').collapse('show');
  $form.find('.submit_button').hide();
});
于 2013-08-22T05:05:52.557 回答