0

我在 Rails 应用程序中有一个包含邀请码和信用卡信息块的表单。我希望能够在同一页面上的两者之间切换。用户要么提供邀请码，要么输入信用卡信息。如果一个或另一个可以在不活动时隐藏（但不是必需的），那就太好了。这是表格的相关位：

  %hr

  %fieldset
    .control-group
      = label_tag :invite_code, nil, :class => "control-label"

      .controls
        = text_field_tag :invite_code

    .control-group
      .controls
        = f.hidden_field :stripe_token
        = f.hidden_field :last_4_digits

    - if @user.last_4_digits
      .control-group
        = label_tag :card, nil, :class => "control-label"
        .controls
          Using card ending with #{@user.last_4_digits}
          = link_to "(change)", "#"

  %hr

  %fieldset
    %noscript
      %p
        This form requires Javascript to use

    .control-group#credit-card{ :style => @user.last_4_digits ? "display:none" : "display:block" }
      #credit-card-errors{:style => "display:none"}
        #stripe-error-message.alert-message.block-message.error

      .control-group
        = label_tag :credit_card_number, nil, :class => "control-label"
        .controls= text_field_tag :credit_card_number, params[:credit_card_number], :class => "field", :disabled => true 

      .control-group
        = label_tag :cvv, "Security code (CVV)", :class => "control-label"
        .controls= text_field_tag :cvv, params[:cvv], :class => "small", :disabled => true 

      .control-group
        = label_tag :expiry_date, nil, :class => "control-label"
        .controls= date_select "", :expiry_date, {:discard_day => true, :order => [:month, :year], :use_month_numbers => true, :start_year => Date.today.year, :end_year => Date.today.year + 25, :disabled => true}, {:class => "input-small"}

      /empty
      %p
        Subscriptions will be billed $12 annually.

  %fieldset.form-submit
    = submit_tag 'Sign up', :class => 'btn btn-large btn-primary'

这样做最明智的方法是什么？

4

1 回答 1

0

首先将 CSS id 或类添加到不同的字段集

%fieldset#card
...
%fieldset#invite
...

使用一个名为 hidden 的 CSS 类

.hidden {
  display:none;
}

并将其添加为邀请字段集的默认值

%fieldset#invite.hidden

然后添加您的“有邀请？” 关联

%a{ :class => "have_invite" }

然后沿着这些线一些jquery

var show_invite_form = function(){
    $("#invite").removeClass("hidden");
    $("#card").addClass("hidden");
};
$(".have_invite").click(show_invite_form);

如果你想要它更花哨，你可以开始查看 jquery 的淡入淡出和动画方法。

于 2012-10-29T10:00:44.597 回答