Rails简单表单引导Javascript

我有一个rails 4应用程序，具有引导和简单的形式

我有一个简单的数据表

它有一个主要问题，如果回答为真，则需要一个后续问题。我想隐藏后续问题，直到第一个问题被回答为真

我已经为后续问题（调查链接数据）上方的标签定义了一个单独的CSS类，以便隐藏标签并显示输入字段。这个JS是不正确的-它并没有像我希望的那样隐藏在节目中

你能看出我做错了什么吗？多谢各位

以下是（@datum）问题的两个简单形式：

<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?'  %>
<br><br>


    <%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'data-survey-link' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px',  class: 'response-project'} %>

：boolean，：label=>false，inline_label:“您需要调查响应吗？”%%>



{:class=>'datasurvey link'}，占位符：'Include a link to your survey'，:input_html=>{:style=>'width:650px；margin top:20px'，class:'response project'}%>

这是我的JS脚本：

<script>
$(function() {
    // Hide the survey_link input

    $('input[name="datum[survey_link]"]').hide();
    $('.data-survey-link').hide();
    // When the survey checkbox changes
    $('input[name="datum[survey]"]').change(function() {
         // If the survey checkbox is ticked
         if(this.checked) {
              // Survey checkbox was ticked - show the survey_link input
              $('input[name="datum[survey_link]"]')toggle(this.checked);
              $('.data-survey-link').show();

         } else {
              // Survey checkbox was unticked - hide the survey_link input
              $('input[name="datum[survey_link]"]').hide();
              $('.data-survey-link').hide();

         }
    });
});
</script>

$（函数（）{
//隐藏测量链接输入
$（'input[name=“datum[survey_link]”）。hide（）；
$（'.data survey link'）.hide（）；
//当“调查”复选框更改时
$（'input[name=“datum[survey]”）。更改（函数（）{
//如果勾选了调查复选框
如果（选中此项）{
//选中调查复选框-显示调查链接输入
$（'input[name=“datum[survey_link]”）切换（选中此项）；
$（'.data survey link'）.show（）；
}否则{
//调查复选框未选中-隐藏调查链接输入
$（'input[name=“datum[survey_link]”）。hide（）；
$（'.data survey link'）.hide（）；
}
});
});

首先，您选择并隐藏两个元素（标签和输入），这比仅隐藏/显示包装器效率低（默认情况下，简单表单将输入和标签包装在特殊的

div

标记中）。让我们给这个包装器一个类：

<%= f.input :survey_link, wrapper_html: { class: 'survey-link-wrapper' } %>

其次，为第一个输入创建更高效的选择器：

<%= f.input :survey, input_html: { class: 'survey-checkbox' } %>

然后您的javascript代码变为：

<script>
$(function() {
    var $surveyLinkWrapper = $('.survey-link-wrapper');
    $('.survey-checkbox').change(function(e) {
         // If the survey checkbox is ticked
         if ( $(this).is(":checked") )  {
              // Survey checkbox was ticked - show the survey_link input
              $surveyLinkWrapper.show();
         } else {
              $surveyLinkWrapper.hide();
         }
    });
});
</script>

$（函数（）{
变量$surveyLinkWrapper=$（'.surveyLinkWrapper'）；
$（'.survey复选框'）.change（函数（e）{
//如果勾选了调查复选框
如果（$（this）.is（“：checked”））{
//选中调查复选框-显示调查链接输入
$surveyLinkWrapper.show（）；
}否则{
$surveyLinkWrapper.hide（）；
}
});
});

---

更清晰、更容易阅读。

回答我自己的问题：$（function（）{//隐藏调查链接输入$（'.datum\u survey\u link'）。Hide（）；//当调查复选框更改$（document）时。（'change'，'input[name=“datum[survey]”，function（）{$（'.datum\u survey\u link'）。toggle（this.checked）；}）；这不会很顺利，因为先加载css，然后再加载javascript，您隐藏的表单很可能只是让人一瞥。首先使用Css隐藏，然后使用javascript。（只是一个建议）我认为CSS来源于简单的表单，并首先使用CSS然后使用javascript进行引导处理，这很复杂。请告诉我如何隐藏从示例中剥离出来的标签？从您的示例中删除的输入字段位是否有问题？感谢you@user2860931但当您隐藏一个包装标签和复选框的div时，它们都不会被看到。这对您不合适吗？您的建议确实可以隐藏和显示调查链接。我想知道是不是因为字段的其他内容从您的示例中删除了，所以现在都搞砸了。调查问题已丢失其标签，占位符和样式已消失。当我向输入字段添加包装器_html时，我收到一个错误，说我的参数数不正确。我昨天收到另一个解决方案-这是一个单独的JS公共文件，其中包含：$->$（文档）。在“更改”上，输入.toggle_div'，（）->$（$（this）.attr（'target'）。切换此选项。选中

<script>
$(function() {
    var $surveyLinkWrapper = $('.survey-link-wrapper');
    $('.survey-checkbox').change(function(e) {
         // If the survey checkbox is ticked
         if ( $(this).is(":checked") )  {
              // Survey checkbox was ticked - show the survey_link input
              $surveyLinkWrapper.show();
         } else {
              $surveyLinkWrapper.hide();
         }
    });
});
</script>