0

我正在尝试使用 jQuery，以便根据单击的单选按钮显示不同的部分或表单。我首先使用 JSFiddle 让它在一个普通的 vanilla 表单上工作，一切看起来都很好，但是当我将相同的代码逻辑应用于使用 simple_form gem 的 rails 应用程序时，似乎没有任何工作。

请参阅下面的代码

$("input[type=radio]").click(function(){
    if ($('input[name=usertype]:checked').val() == "User A") {
        $("#one").slideDown("fast");
        $("#two").slideUp("fast");
        $("#three").slideUp("fast");
        $("#four").slideUp("fast");
    }
    if ($('input[name=usertype]:checked').val() == "User B") {
        $("#two").slideDown("fast");
        $("#one").slideUp("fast");
        $("#three").slideUp("fast");
        $("#four").slideUp("fast");
    }
    if ($('input[name=usertype]:checked').val() == "User B") {
        $("#three").slideDown("fast");
        $("#two").slideUp("fast");
        $("#one").slideUp("fast");
        $("#four").slideUp("fast");
    }
    if ($('input[name=usertype]:checked').val() == "User B") {
        $("#four").slideDown("fast");
        $("#three").slideUp("fast");
        $("#two").slideUp("fast");
        $("#one").slideUp("fast");
    }
});

   <%= simple_form_for(resource, :as => resource_name, :html => { :class => 'form-horizontal' }, :url => registration_path(resource_name)) do |f| %>
    <%= f.input :email, placeholder: 'example@domain.com' %>
    <%= f.input :username %>
    <%= f.input :usertype, label: 'Which best describes you', :input_html => {:name => "usertype"}, :collection => ["User A", "User B", "User C", "User D"],
                as: :radio_buttons %>
    <ul id="one">
      <li><%= f.input :dob, label: 'Date of Birth', as: :date, start_year: Date.today.year - 90,
                  end_year: Date.today.year - 16,
                  order: [:day, :month, :year] %></li>
    </ul>
    <ul id="two">
      <li><%= f.input :launchedIn, label: 'Year club launched', as: :date, start_year: Date.today.year - 300,
                  end_year: Date.today.year, discard_day: true, discard_month: true, order: [:year] %></li>
    </ul>
    <ul id="three">
      <li><%= f.input :category, :collection => ["Football", "Golf", "Tennis", "Rugby"], prompt: 'Choose an Sport' %>
    </ul></li>
    <ul id="four">
      <li><%= f.input :bio, label: 'Tell us about you', hint: 'Maximum 300 characters' %></li>
    </ul>
    <%= f.input :password %>
    <%= f.input :password_confirmation %>
    <div><%= f.submit "Register", :class => 'btn btn-primary' %></div>
<% end %>

至少有四个版本的 JSFiddle 可以工作，但是没有一个可以在我的 rails 应用程序上工作。

非常感谢您的帮助，因为我的压力球只能承受这么多:-)

非常感谢

基兰

4

2 回答 2

1

看起来你的脚本没有准备好 dom。在 dom 中添加你的脚本准备好了，它应该可以工作

jQuery(function($){
    $("input[type=radio]").click(function(){
        var val = $('input[name=usertype]:checked').val();
        if (val == "User A") {
            $("#one").slideDown("fast");
            $("#two").slideUp("fast");
            $("#three").slideUp("fast");
            $("#four").slideUp("fast");
        } else if (val == "User B") {
            $("#two").slideDown("fast");
            $("#one").slideUp("fast");
            $("#three").slideUp("fast");
            $("#four").slideUp("fast");
        } else if (val == "User B") {
            $("#three").slideDown("fast");
            $("#two").slideUp("fast");
            $("#one").slideUp("fast");
            $("#four").slideUp("fast");
        } else  if (val == "User B") {
            $("#four").slideDown("fast");
            $("#three").slideUp("fast");
            $("#two").slideUp("fast");
            $("#one").slideUp("fast");
        }
    });
});

您也可以尝试类似

jQuery(function($) {
    var usertypes = $('input[name=usertype]'), uis = $('#one, #two, #three, #four'), valueMap = {
        "User A" : $('#one'),
        "User B" : $('#two'),
        "User C" : $('#three'),
        "User D" : $('#four')
    };
    $("input[type=radio]").click(function() {
        var val = usertypes.filter(':checked').val(), ui = valueMap[val];
        uis.not(ui).slideUp("fast");
        ui.slideDown("fast");
    });
});

演示：小提琴

于 2013-07-11T10:30:21.443 回答
0

假设您使用 Rails 3.2 或更新版本，...尝试：

  1. 检查应用程序生成的JS是否正确（包含您的代码）（html页面的源代码）
  2. 你有没有rake assets:precompile在应用这个之前跑过？Rails 可能会选择你的 application.js 的预编译版本。如果是这样试试rake assets:clean
  3. 确保在您拥有 JS/CoffeeScript 逻辑的文件之前加载您的 jQuery
  4. 确保$(document).ready ->在处理逻辑的 JS/CoffeeScript 文件中使用
于 2013-07-11T10:37:14.470 回答