如何根据喜欢和不喜欢的百分比填充喜欢栏？

Question

我正在尝试重新创建 youtube 喜欢/不喜欢栏，该栏充满了 2 种不同的颜色，代表相互比较的喜欢和不喜欢的数量并相应地填充颜色。所以我有我的Product 模型，你可以喜欢或不喜欢：

.vote-bar
  .bar
    .likes{style: "width: #{@product.get_likes.size}%"}
    .dislikes{style: "width: #{@product.get_dislikes.size}%"}

我正在使用Acts As Votable gem，它可以让我了解产品的喜欢和不喜欢的数量。我在如何根据 100% 获得每个百分比时遇到问题。所以，如果我有 1 个喜欢它应该填满整个栏，如果我有 0 个不喜欢它应该什么都不填。另一个例子是 2% 的喜欢 = 2% 的条形图，3% 的不喜欢 = 3% 的条形图。不过，两个 div 总共只能等于 100%。我该怎么做？

Answer 1

要获得百分比，您需要将每个值除以总票数。您可以将这些方法添加到 Product 模型中：

class Product
  def percentage_likes
    self.get_likes.size.to_f / self.votes_for.size * 100
  end

  def percentage_dislikes
    self.get_dislikes.size.to_f / self.votes_for.size * 100
  end
end

请注意，我已将喜欢和不喜欢的大小转换为浮点数，因为整数除以整数将返回另一个整数。另外，我已经乘以 100，所以分数将转换为百分比。

您的视图将如下所示：

.vote-bar
  .bar
    .likes{style: "width: #{@product.percentage_likes}%"}
    .dislikes{style: "width: #{@product.percentage_dislikes}%"}

您可能需要做一些额外的 CSS 操作来浮动 .likes 和 .dislikes div，以便它们并排显示。