javascript - Rails 简单形式 Bootstrap Javascript

Question

我有一个带有 Bootstrap 和简单形式的 Rails 4 应用程序。

我有一个简单的数据表格。

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

我为后续问题 (survey-link-data) 上方的标签定义了一个单独的 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'} %>

这是我的 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>

Answer 1

首先，您要选择并隐藏两个元素(标签和输入)，这比隐藏/显示包装器的效率要低(默认情况下 simple_form 将输入和标签包装在特殊的 div 中) > 标签)。让我们给这个包装器一个类:

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

为了简单起见，我删除了其余选项。

您最初可以使用 CSS 隐藏它:

.survey-link-wrapper {
  display:  none;
}

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

<%= 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>

更清晰、更容易阅读。