在 ruby​​ on Rails 中单击时显示元素

Question

我有一个页面，在有人单击“我想查看答案”按钮后应该显示良好的答案。

我制作了一个显示在正确答案旁边的图标：

  <% if answer.correct == true %>
    <%= raw @ikona %><p> <%= answer.content %></p>
  <% else %>
  <p><%= answer.content %></p>
      <% end %>
      </div>
  <% end %>

我想仅在用户单击按钮后显示它。它无法使页面重新加载，因为用户应该能够将他们勾选的内容与实际的正确答案进行比较。我该怎么办？

Answer 1

前端

你要问的是与Rails 应用程序的front-endvs相关的事情back-end

前端 GUI 功能不是 Rails 的用途 - Rails 是一个后端系统，用于获取requests和处理response

因此，要回答您的问题，您基本上需要jquery在前端使用来公开您想要的内容.on("click"。问题是您希望如何显示该内容（可以使用 Ajax）

jQuery

JavaScript 是客户端的（它在浏览器中加载），并且影响 DOM（文档对象模型）。这意味着页面上的每个 HTML 元素都可以受到 Javascript 的影响/操作 - 允许您在页面上创建“交互性”

对于您的“点击”要求，您可以这样做：

#app/assets/javascripts/application.js
$(document).on("click", "#element", function(){
   // do something here
});

这会将 DOM 的事件绑定click到您希望执行的功能，这基本上意味着加载您的div

**请注意，我在上面使用了Javascript 委托，因为 Rails 通常会阻止标准 javascript 工作（turbolinks 会导致很多问题）

数据

一旦您在 JavaScript 中实现了click事件绑定，您就需要一些功能来使其执行一些有用的操作。您有两个选择：

1. Ajax（动态拉取数据）
2. 隐藏DIV

--

DIV

基本上，如果您想让内容在单击按钮时显示，您将需要从某个地方调用该内容。最简单的方法是使用隐藏的 div，如下所示：

#app/assets/stylesheets/application.css
.hidden { display: none; }

#app/assets/views/controller/your_view.html.erb
<div class="hidden" id="your_id">
   Hidden content
</div>

这将允许您使用这样的东西：

#app/assets/javascripts/application.js
$(document).on("click", function() {
   $("#your_id").show();
});

--

阿贾克斯

另一种方法是使用ajax来提取您需要的数据：

#app/controllers/controller.rb
respond_to :json, :js, :html


#app/assets/javascripts/application.js
$(document).on("click", "#element", function() {
    $.ajax({
       url: "answers/" + $(this).attr("id")
       success: function(data) {
           // append data to your DOM
       }
    });
});