如果值为 true 或 false，则更改按钮类别

Question

我有两个状态相反的按钮“冻结”和“解冻”。当数据库记录处于错误状态时，我想显示下面的“冻结”按钮：

<%= form.submit "Freeze", class: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded' %>

当数据库记录处于真实状态时，我想在此处显示“解冻”按钮：

<%= form.submit "Unfreeze", class: 'bg-white-500 hover:bg-white-700 text-white font-bold py-2 px-4 border border-blue-700 rounded' %>

我在想这样的事情，但我不确定（而且，这没有文字改变......）：

<tr class=<%= dbrecord.frozen ? "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" : "bg-white-500 hover:bg-white-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" %>>

Answer 1

为什么不让它变得非常简单呢？

<% if dbrecord.frozen? %>
  <%= form.submit "Unfreeze", class: 'bg-white-500 hover:bg-white-700 text-white font-bold py-2 px-4 border border-blue-700 rounded' %>
<% else %>
  <%= form.submit "Freeze", class: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded' %>
<% end %>

恕我直言，这很容易阅读和理解。

Answer 2

这不是我最喜欢的方式，但你可以这样做：

<%= form.submit(dbrecord.frozen ? 'Unfreeze' : 'Freeze', class: 'bg-white-500 hover:bg-white-700 text-white font-bold py-2 px-4 border border-blue-700 rounded') %>

但是，请警惕切换陷阱。 通常，这些类型的切换按钮是通过代码中的切换来实现的，这很容易出错。确保执行所要求的任务，而不仅仅是切换值。 例如，假设数据库字段的值为

frozen: true

并且页面显示

Unfreeze

。然后，基础值可能会被另一个浏览器选项卡中的同一用户更改为

frozen: false

。现在原始页面仍会显示带有

Unfreeze

文本的按钮。然后，用户忘记了他们之前做过的事情，并希望确保记录已解冻，因此他们单击原始页面上的原始

Unfreeze

按钮。如果设置为仅切换 DB 值，则它现在将被错误地设置为

frozen: true

。确保您执行所要求的任务，而不仅仅是执行一些切换。我已经多次看到这种错误的做法。