Rails：div元素的条件渲染答案

【问题标题】：Rails: conditional rendering of div elementsRails：div元素的条件渲染
【发布时间】：2015-12-16 01:18:36
【问题描述】：

我有一个 Rails 4 应用程序，我试图使用 3 个单选按钮来控制呈现哪些 div 元素。我正在使用 JQuery 来完成此操作，但我没有在控制台上获得任何输出，并且 browser.log 中没有针对 JS 函数的动态函数。我正在尝试应用以下业务规则：

如果选择了文本 - 呈现文本字段

如果选择了 url - 呈现搜索字段

如果选择了文档 - 呈现文本字段和文件浏览/上传元素

<h2>Content Analysis</h2>

</br>
<%= form_tag("documents/create", method: "get") do %>
<%= label_tag('type', "Choose your input type:") %>
</br>
<%=  radio_button_tag(:type, "text")  %>
&thinsp;
<%=  label_tag(:text_input, "text")  %>
&emsp;
<%=  radio_button_tag(:type, "url")  %>
&thinsp;
<%=  label_tag(:url_input, "url")  %>
&emsp;
<%= radio_button_tag(:type, "document") %>
&thinsp;
<%= label_tag(:document_input, "document") %>
</br>
</br>

<%= label_tag(:q, "Perform Analysis:") %>
</br>

<!-- Render if document is selected -->
<p>Select a document to analyze</p>
<div id="file"><input type="file" /><br /></div>

<!-- Use this for url -->   
<div id="url>"><%= search_field_tag :q, value = nil, options =       
{style:"width:500px;border-radius:5px;padding-bottom:5px;"} %></div>

<!-- Use this for text and documents -->  
<div id="text"><%= text_area_tag :q, value = nil, options =  
{style:"width:700px;height:275px;border-radius:5px;padding-  
bottom:5px;"} %></div>

</br>
</br>
<%= submit_tag("Analyze") %>

<% end %>

application.html.erb 头部：

<head>
 <title>Raven</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <%= stylesheet_link_tag    'application', media: 'all', 'data-
  turbolinks-track' => true %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track' =>  
  true %>
 <%= csrf_meta_tags %>
</head>

application.js：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require search_fields
//= require_tree .

search_fields.js（这是 JQuery 所在的位置）：

$(document).ready(function() {

$('#type_document').click(function() {
  $("#file").toggle(this.checked);
  console.log("document works");
});

$('#type_url').click(function() {
  $("#url").toggle(this.checked);
  console.log("url works");
});

$('#type_document').click(function() {
  $("#text").toggle(this.checked);
  console.log("document works");
});

$('#type_text').click(function() {
  $("#text").toggle(this.checked);
  console.log("text works");
});

});

【问题讨论】：

标签： javascript jquery ruby-on-rails-4 asset-pipeline

【解决方案1】：

你在 application.js 里放了这个：

//= require search_fields

根据你所说，你将文件命名为：search_field.js

【讨论】：

那是我描述中的一个错字。 app.js 和包含 JQuery 的实际 js 文件之间的名称是一致的。