Javascript 通过匹配表中的关联为行着色

我的目标是使具有匹配属性的循环结果具有相同颜色背景的行

以下是我的尝试：

控制器：

表格：

我的目标是，如果订单的购物车id匹配，那么与购物车id匹配的x数量的订单将具有相同的颜色背景，以便知道它们是相同的购物车

例如：

因此，ID 1和2的行为红色，ID 4和5的行为蓝色。3没有颜色，因为它不属于任何购物车。此外，我希望这只适用于有多个项目的推车

有些订单没有购物车，只有一个产品与之关联。某些订单是使用购物车创建的，购物车将包含多个行项目

那么基本上，如果存在订单购物车id？和cart.line_items.count>1，以使与其关联的所有订单具有相同的颜色

型号：

我的尝试什么都没有。所有的结果都变成红色

---

我正在标记JS和JQ以防万一，因为我认为这是一个可行的选择。

这是一个建议。我编辑并服务于同样的目的

在您的控制器中，从@vendor_orders中提取购物车id，并使用id作为键和随机颜色作为值进行散列

    @ids = @vendor_orders.pluck(:id)
    @ids = @ids.uniq
    @color = Hash.new
    @ids.each do |val|
        @color["#{val}"] = "##{random_hex}"
    end

随机十六进制在哪里

def random_hex
    colour = "%06x" % (rand * 0xffffff)
    return colour
end

现在，在您的视图内部循环中，从@color like调用对应于cart_id的颜色

---

您将需要一些既不属于视图也不属于控制器的专用逻辑。我建议您将此逻辑放入演示者中

控制器逻辑非常简单：

# app/controllers/orders_controller.rb

class OrdersController < ApplicationController
  def index
    @presenter = VendorOrderPresenter.new(current_user&.id)
  end
end

现在，视图层简单直观，没有条件逻辑或专用逻辑：

# app/views/orders/index.html.erb

<h1>Index</h1>
<table>
  <thead>
  <th>Order ID</th>
  <th>Cart ID</th>
  </thead>
  <tbody>
  <% @presenter.vendor_orders.each do |order| %>
    <tr style='background:<%= @presenter.background_color(order) %>'>
      <td><%= order.id %></td>
      <td><%= order.cart_id %></td>
    </tr>
  <% end %>
  </tbody>
</table>

---

可以找到一个完整的工作解决方案。

您知道条件的if分支和else分支是相同的吗？我想显示所有记录，即使order.cart\u id==order.cart\u id==false。无论哪种方式，这只是众多尝试中的一种。没有必要显示其他尝试，因为没有工作的方式，我希望不幸。我已经做过多次迭代，等等。但是order.card\u id==order.cart\u id必须始终为真。嗯。。。我怎样才能实现我想要的呢？我想这会比较所有的价值结果好的，这很有效，谢谢。如何指定要使用的颜色列表而不是随机？所以它在红色和蓝色之间迭代，实际上，由于很多原因，这不起作用。颜色基于供应商订单的id，而不是购物车的id。而且它不区分购物车是否有多个项目。@uno如果有两个以上的ID，只要它迭代就可以了。我只是不想让同一种颜色挨在一起。基本上，我只想将颜色作为视觉辅助，而不需要阅读cart_id列以查看它们是否共享同一个购物车。您应该将%2更改为%COLORS.size。它更灵活，摆脱了魔法数字。你走火入魔了。我知道你说这很简单，但我有点不知所措。假设我想为订单添加一列。whereorder\u status:complete，我是尝试将其添加到VendorOrderPresenter，还是创建一个新的演示者文件？您可以使用相同的演示者。只需添加一个公共方法并定义它。请参阅我编辑的答案。您可以使用@presenter.completed\u orders.perfect来处理新方法。还有一个问题是，并非所有订单都有购物车id，没有购物车id的订单不会出现。我如何调整演示者以允许所有订单通过，即使购物车id未显示。基本上一个订单要么有购物车id要么有购物车id，我有if cart.present仍然在视图中lol wow。非挥发性物质。。谢谢你所做的一切

**cart**

has_many :line_items, dependent: :destroy
has_one :order
...

**line items**

belongs_to :cart
...

**order**

belongs_to :cart

    @ids = @vendor_orders.pluck(:id)
    @ids = @ids.uniq
    @color = Hash.new
    @ids.each do |val|
        @color["#{val}"] = "##{random_hex}"
    end

def random_hex
    colour = "%06x" % (rand * 0xffffff)
    return colour
end

# app/controllers/orders_controller.rb

class OrdersController < ApplicationController
  def index
    @presenter = VendorOrderPresenter.new(current_user&.id)
  end
end

# app/presenters/vendor_order_presenter.rb

class VendorOrderPresenter
  COLORS = %w[red blue].freeze

  def initialize(current_user_id)
    @current_user_id = current_user_id
  end

  def vendor_orders
    @vendor_orders ||= Order.where(product_id: vendor_products.pluck(:product_id)).order(created_at: :desc)
  end

  def completed_orders
    @completed_orders ||= vendor_orders.where(order_status: "complete")
  end

  def background_color(order)
    index = colorable_cart_ids.index(order.cart_id)
    index ? COLORS[index % COLORS.size] : nil
  end

  private

  attr_reader :current_user_id

  def vendor_products
    VendorProduct.where(vendor_id: current_user_id)
  end

  def colorable_cart_ids
    @colorable_cart_ids ||= cart_ids.select { |id| cart_ids.count(id) > 1 }.uniq
  end

  def cart_ids
    @cart_ids ||= vendor_orders.pluck(:cart_id).compact
  end
end

# app/views/orders/index.html.erb

<h1>Index</h1>
<table>
  <thead>
  <th>Order ID</th>
  <th>Cart ID</th>
  </thead>
  <tbody>
  <% @presenter.vendor_orders.each do |order| %>
    <tr style='background:<%= @presenter.background_color(order) %>'>
      <td><%= order.id %></td>
      <td><%= order.cart_id %></td>
    </tr>
  <% end %>
  </tbody>
</table>