javascript - 分组交替行颜色与变化

Question

这是一个简单的逻辑问题，但我有一个心理障碍。我有如下几组行:

请注意以下事项:

• 第 1 组有 2 条记录
• 第 2 组有 2 条记录
• 第 3 组有 1 条记录
• 第 4 组有 2 条记录
• 第 5 组有 1 条记录
• 第 6 组有 2 条记录

我希望每个组中的每条记录都具有与组中其他记录相同的背景颜色，但与后面的下一个分组具有不同的背景颜色。所以，我想要实现的是:

• 第 1 组中的两条记录都应具有白色背景色。
• 第 2 组中的两条记录都应具有灰色背景色。
• 第 3 组中的唯一记录应具有白色背景色。
• 第 4 组中的两条记录都应具有灰色背景色。

...等等。因此，我希望每个组的背景颜色交替，而每个组内的颜色保持彼此一致，而不是每个记录的背景颜色交替的典型交替行颜色。

我当前的逻辑是这样做的:

if($gameID != $previousGameID)
    $rowColor = "#ffffff";
else
    $rowColor = "#F0F0F0";

虽然代码是PHP，但这个问题并不是PHP独有的，它只是一个逻辑问题，这就是为什么我用PHP、C#和JS(我知道的3种语言)来标记这个问题。我上面的代码是错误的，因为它导致背景颜色针对每个记录发生变化，而不是针对每组记录。每个组中的记录具有相同的游戏 ID，并且该游戏 ID 将与所有其他组不同。所以 gameID 是解决这个小难题的关键部分，但我无法理解解决方案。

注意:您不能假设每个分组都有 1 或 2 条记录。尽管我的示例没有显示这一点，但在极少数情况下，一组中会有 3 条记录(在这种情况下，所有 3 条记录都将具有相同的 gameID)。

有什么想法吗？

Answer 1

当前逻辑的问题在于，即使 gameID 没有更改，您也总是会更改 $rowColor。

创建一个 alternateColor() 函数，调用该函数时，会在灰色和白色之间更改 $rowColor。

然后将您的条件更新为

if($gameID != $previousGameID)
    alternateColor();

然后使用更新后的$rowColor。

该解决方案适用于任何类型的 ID(数字、字符串等)。一个简单的情况是数字顺序 ID，即:1、2、3 等。在这种情况下，逻辑可能是:

if ($gameID % 2 == 0)
    $rowColor = "#ffffff";
else
    $rowColor = "#F0F0F0";

即根据ID的奇数或偶数来选择对应的颜色。

更新:

关于连续 ID，我并不是暗示您的 ID 是连续的。我暗示如果是的话，模数解就足够了。 alternateColor() 函数方法适用于任何类型的 ID。

作为 alternateColor() 的示例，请考虑以下 (C#):

在逻辑所在的类中，创建一个实例方法 AlternateColor 并确保您的 rowColor 变量是实例级变量:

private string rowColor == "#ffffff"; // let's start with white

private void AlternateColor()
{
    this.currentColor = this.currentColor == "#ffffff" ? "#F0F0F0" : "#ffffff";
}

现在，每次调用 AlternateColor 时，它都会在两种颜色之间交替 rowColor。这是在当前 gameID 更改时完成的。

更新 2:

不确定以下 PHP 的正确性，但您应该明白:

class Games {
  private var $rowColor;

  private function alternateColor(){
     $this->$rowColor = ($this->$rowColor == "#ffffff" ? "#F0F0F0" : "#ffffff");
  }

  public function theFuncWhereYouOutputTheTable(){
     ...

     if($gameID != $previousGameID)
         $this->alternateColor();

     // use $rowColor afterwards
     ...
  }

}