Question

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

如果选择了文本 - 渲染文本字段

如果选择了网址 - 渲染搜索字段

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

<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 section：

<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");
});

});

Answer 1

你输入了application.js：

//= require search_fields

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

Rails：div元素的条件渲染

1 个答案: