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

Posted 2023-02-26

【中文标题】在 ruby​​ on rails 中单击时显示元素

【英文标题】：Showing elements on click in ruby on rails

【发布时间】：2014-06-28 18:43:59

【问题描述】：

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

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

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

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

【问题讨论】：

如果您正在加载所有内容，那么您可以初始隐藏它并使用简单的 jquery 隐藏/显示事件在单击图标时显示它

Ruby 不能这样做，这是客户端逻辑，需要在 javascript 上实现。Read doc

正如@Icicle 所说，您最好为此使用jquery。 Ryan Bate 的 railscasts 谈到在 rails 中使用 jquery...railscasts.com/episodes/136-jquery

谢谢，我会试试这个！

【参考方案1】：

前端

您要问的是 Rails 应用程序的 front-end 与 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 delegation，因为 Rails 通常会阻止标准 javascript 工作（turbolinks 会导致很多问题）

---

数据

一旦您在 javascript 中实现了 click 事件绑定，您就需要一些功能来让它做一些有用的事情。您有两个选择：

Ajax（动态拉取数据） 隐藏的 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
       
    );
);