【问题标题】:Rails Simple Form Bootstrap - Javascript if statement to reveal inputRails Simple Form Bootstrap - 显示输入的 Javascript if 语句
【发布时间】:2014-11-19 14:37:15
【问题描述】:

我有一个带有简单表单和引导程序的 rails 4 应用程序。

我想在我的表单中提出一个问题,询问用户是否需要调查回复。如果答案是真的,那么我想问一个后续问题。我的两个调查问题是:

<%= 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 => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px',  class: 'response-project'} %>

JS if 语句是完成这项任务的最佳方式吗?我想隐藏第二个问题,直到用户对第一个问题的回答为真。

如果是这样,我很难理解如何使这个 JS 工作。

我试过了:

 if (:survey is :true) {
    :survey_link;
}

我找不到任何资源来帮助解释如何执行此操作。帮助将不胜感激。谢谢。

【问题讨论】:

    标签: javascript jquery ruby-on-rails twitter-bootstrap simple-form


    【解决方案1】:

    显然,下面的代码取决于您的 surveysurvey_link 输入的名称在实际 HTML 中的样子。所以如果在这个例子中是@user:

    <% simple_form_for @user do |f| %>
        <%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?'  %>
        <%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px',  class: 'response-project'} %>
    <% end %>
    

    然后 JQuery 应该看起来像(注意 user 部分 - 您可能需要更改它):

    <script>
    $(function() {
        // Hide the survey_link input
        $('input[name="user[survey_link]"]').hide();
        $('input[name="user[survey_link]"]').closest("label").hide();
    
        // When the survey checkbox changes
        $('input[name="user[survey]"]').change(function() {
             $('input[name="user[survey_link]"]').closest("label").toggle(this.checked);
             $('input[name="user[survey_link]"]').toggle(this.checked);
        });
    });
    </script>
    

    【讨论】:

    • 非常感谢您的帮助。我很难应用它。我会用我的尝试更新我的帖子。我非常感谢您抽出时间来解释这一点。谢谢!
    • 非常感谢您的帮助。我很难应用它。它非常适用于表单字段,但其上方的标签(显示“您的调查在哪里”的位需要使用调查链接隐藏)。请你告诉我如何将标签与隐藏字段链接起来。非常感谢你,希望你有一个美好的一天。
    • 如果您还想隐藏标签,只需在上面的另一个hide() 命令中添加$('.question-data').hide();,在另一个show() 命令中添加$('.question-data').show();
    • 隐藏了该类样式的所有内容(包括表单中不应隐藏的其他标签。有没有办法将其限制在此输入上的标签(survey_link)?谢谢跨度>
    • 这实际上没有用。标签没有隐藏。是否最好为每个标签创建一个单独的 CSS 类,以便我可以按照您最初显示的方式隐藏它?谢谢
    猜你喜欢
    • 2015-06-09
    • 1970-01-01
    • 2017-07-03
    • 2018-01-11
    • 1970-01-01
    • 2016-11-09
    • 1970-01-01
    • 1970-01-01
    • 2020-10-10
    相关资源
    最近更新 更多