显示元素点击在铁轨上的红宝石

Question

我有一个页面应该在有人点击按钮后显示好答案＆＃34;我想看到答案＆＃34;。

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

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

我想在用户点击按钮后才显示它。它不能使页面重新加载，因为用户应该能够将他们勾选的内容与正确的答案进行比较。我该怎么做呢？

Answer 1

前端

您提出的问题与使用Rails应用的front-end vs back-end相关

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

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

---

<强> JQuery的

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

对于你的＆＃34;点击＆＃34;要求，你可以这样做：

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

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

**请注意我上面使用过Javascript delegation，因为Rails通常会阻止标准的javascript工作（turbolink会导致很多问题）

---

数据

在您的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

另一种方法是使用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
       }
    });
});