Javascript Rails 4表单:基于单选按钮选择的字段条件显示
首先,如果这个问题很愚蠢,请原谅,我刚刚开始关注Rails,Javascript和jQuery对我来说是一个全新的世界 我发现了以下类似的问题,但我不明白这些问题如何适用于我的情况:Javascript Rails 4表单:基于单选按钮选择的字段条件显示,javascript,jquery,ruby-on-rails,forms,ruby-on-rails-4,Javascript,Jquery,Ruby On Rails,Forms,Ruby On Rails 4,首先,如果这个问题很愚蠢,请原谅,我刚刚开始关注Rails,Javascript和jQuery对我来说是一个全新的世界 我发现了以下类似的问题,但我不明白这些问题如何适用于我的情况: 话虽如此,我的问题是 在我的Rails 4应用程序中,我有以下Rails表单(我不是使用简单表单): 在application.js中,我添加了/=require_tree./custom,以便在我的应用程序中考虑上述代码 在我的表单所在的视图(Calendars#Newview)中,我现在有: <
application.js
中,我添加了/=require_tree./custom
,以便在我的应用程序中考虑上述代码
在我的表单所在的视图(Calendars#New
view)中,我现在有:
<div class="calendar_details">
<%= f.label :target_relationship, "Business relationship" %>
<%= f.radio_button :target_relationship, "calendar_details_b2c", :checked => true %>
<%= f.label(:target_relationship, "B2C") %>
<%= f.radio_button :target_relationship, "calendar_details_b2b", :checked => false %>
<%= f.label(:target_relationship, "B2B") %>
</div>
<div class="calendar_details">
<%= f.label :target_country, "Country" %><%= f.country_select :target_country, ["United States"] %>
</div>
<div id="calendar_details_b2c">
<div class="calendar_details">
<%= f.label :target_gender, "Gender" %><%= radio_button_tag(:target_gender, "Female") %><%= label_tag(:target_relationship, "Female") %><%= radio_button_tag(:target_gender, "Male") %><%= label_tag(:target_relationship, "Male") %><%= radio_button_tag(:target_gender, "Both", :checked => true) %><%= label_tag(:target_relationship, "Both") %>
</div>
<div class="calendar_details">
<%= f.label :target_age_lower_limit, "Age / Lower limit" %><%= f.select :target_age_lower_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_age_upper_limit, "Age / Upper limit" %><%= f.select :target_age_upper_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_lower_limit, "Household income / Lower limit" %><%= f.select :target_household_income_lower_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_upper_limit, "Household income / Upper limit" %><%= f.select :target_household_income_upper_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
</div>
<div id="calendar_details_b2b">
<div class="calendar_details">
<%= f.label :target_company_size, "Company size" %><%= f.select :target_company_size, ['Self-employed', '1-10 employees', '11-50 employees', '51-200 employees', '201-500 employees', '501-1,000 employees', '1,001-5,000 employees', '5,001-10,000 employees', 'More than 10,000 employees'] %>
</div>
<div class="calendar_details">
<%= f.label :target_industry, "Industry" %><%= f.select :target_industry, ['Art & Entertainment', 'Autos & Vehicles', 'Beauty & Fitness', 'Books & Litterature', 'Business & Industrial', 'Computer & Electronics', 'Finance', 'Food & Drinks', 'Games', 'Hobbies & Leisure', 'Home & Garden', 'Internet & Telecom', 'Jobs & Education', 'Law & Government', 'News', 'Online Communities', 'People & Society', 'Pets & Animals', 'Real Estate', 'Science', 'Shopping', 'Sports', 'Travel'] %>
</div>
</div>
我还用/=require\u-tree.
替换了/=require\u-tree.
,以确保所有.coffee
文件都是通过application.js
加载的
尽管有所有这些代码更新,我仍然没有得到我期望的结果:我的视图中没有显示任何div
s:
我肯定错过了一些非常非常明显的东西,但我不知道是什么
有什么想法吗
-----
非常感谢您提供的任何帮助。您可以轻松使用js文件中的jQuery函数 只用
$('input[type=radio][name=abc]').change(function() {
// check radio button value by this.value
// hide div blocks by $('div#id').hide();
});
我会这样做: 说明: 假设HTML将是:
<form action="">
<input type="radio" name="calendars" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calendars" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" style=>
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
JS代码将是:
$('input[type=radio][name=calendars]').change(function () {
// first: hide all the divs
$('#calendar_details_b2c').css("display","none");
$('#calendar_details_b2b').css("display","none");
// then get the div ID to show (i stored it in the "value" of the radio button
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});
更新:
至于您的更新,请注意,在JS部分,按钮组的名称与HTML文件中的名称相匹配:
js:
要在HTML中查找名称,您可以(在chrome中):
注意:如果名称中有方括号(或任何其他特殊字符),则应使用撇号将其括起来
$('input[type=radio][name="calendar[target_relationship]"]')
$(函数(){
变量$divs=$('#divs>div');
$divs.first().show();
$('input[type=radio]')。在('change',function()上{
$divs.hide();
$divs.eq($('input[type=radio]').index(this)).show();
});
});
#divs div{
显示:无;
}
登记
用户名:
密码:
姓名:
电邮:
电话号码:
学生教师
学生班:
学生名册编号:
教师类型:
谢谢,非常有帮助。非常感谢您的详细回答。只是一个简单的问题:我应该把JS代码放在Rails的哪里?在我的application.js文件中?我在我的app/assets/javascript
文件夹中创建了一个custom.js
文件,然后我将/=require custom.js
添加到我的application.js
文件中,以确保它包含在页面加载中。在custom.js
文件中,我粘贴了您的代码。但这对我来说似乎不起作用。你知道我做错了什么吗?JS代码应该放在你所在控制器的相应JS文件中(如果你在projects controller中,那么该文件应该称为projects.JS)(这是我的观点,对于任何情况都不一定是正确的解决方案。)关于你的问题:尝试添加周围的$(文档)。就绪(函数(){
code})代码>围绕JS文件中的代码好的,非常感谢。我按照您的建议包装了我的js代码,并将其移动到正确的文件中。您可以看到我的问题在更新中使用所有相关代码进行了更新。然而,我似乎仍然无法让它工作。知道我在做什么吗?提前谢谢!谢谢我在更新2部分中添加了一些新信息。我真的不明白我做错了什么。。。
<form action="">
<input type="radio" name="calendars" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calendars" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" style=>
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
#calendar_details_b2c,
#calendar_details_b2b
{
display: none;
}
$('input[type=radio][name=calendars]').change(function () {
// first: hide all the divs
$('#calendar_details_b2c').css("display","none");
$('#calendar_details_b2b').css("display","none");
// then get the div ID to show (i stored it in the "value" of the radio button
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});
$('input[type=radio][name=NAME_OF_BUTTON_GROUP]')
$('input[type=radio][name="calendar[target_relationship]"]')