如何更改每个动态创建的 FlexBox 的背景颜色？答案

【问题标题】：How to change background color per dynamically created FlexBox?如何更改每个动态创建的 FlexBox 的背景颜色？
【发布时间】：2020-08-01 04:58:37
【问题描述】：

因此，就上下文而言，我目前正在进行的项目正在创建一个仪表板，该仪表板将显示一个位置，而该位置又是一个 IP 地址。因此，我在仪表板中为每个位置动态创建一个 FlexBox，该 FlexBox 将根据与该位置关联的 IP 地址上的 ping 的毫秒（毫秒）响应时间来改变颜色。所以我遇到的问题是每个 FlexBox 的背景颜色并没有像它应该的那样改变。它使用位置列表中的最后一个位置并使每个位置都具有颜色。我提供了一张照片，上面有我所说的例子。颜色代码是黄色的，所以 FlexBox 背景应该是黄色的，但它会变成绿色。现在，如果仪表板中的最后一个 FlexBox 是黄色的，那么所有的盒子都是黄色而不是绿色。

我已经浏览了 Flask 文档 here，但还没有发现任何有用的信息。

下面是我用来实现这一点的代码。它是一个烧瓶应用程序，因此它是 HTML、CSS 和 Python 的组合。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styles.css">

<style>
.flex-container > div {
  width: 15%;
  margin: .5%;
  text-align: center;
  line-height: 200%;
  font-size: 100%;
  color: rgb(226, 225, 225);
  {% for k, v in locations_dicts.items() %}
    background-color:{{ v[1] }};
  {% endfor %}
}

.flex-container > div:hover {
  box-shadow: 0 0 11px rgb(255, 255, 255);
}  
</style>
</head>

<div>
    <h2 class="dashboard-title">Mikrotik Dashboard</h2>
</div>

<div class="topnav">
    <a class="active" href="/">Dashboard</a>
    <a href="/add">Add Location</a>
    <a href="/remove">Remove Location</a>
</div>

<div id="cell" class="flex-container" onclick="remove()">
    {% for k, v in locations_dicts.items() %}
      <div>{{ k }}<br>{{ v[0] }}<br>{{ v[1] }}<br>{{ v[2] }}</div>
    {% endfor %}
</div>

<script id="remove">
  function remove() {
      var remove;
      if (confirm("Do you wish to remove this location?\n(This currently does nothing.)")) {
          remove = true;
      } else {
          remove = false;
      }
      return remove
  }
</script>

<meta http-equiv="refresh" content="60"> 

</html>

【问题讨论】：

为每种颜色创建 css 类，然后为您的弹性盒动态分配类。

标签： html css flexbox jinja2

【解决方案1】：

我在上面发表了评论，但我会在这里尝试阐述。请原谅我，因为我不是 python 开发者。

<style>
.green {
    background-color: green;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
</style>

你应该从你的风格中删除以下内容

{% for k, v in locations_dicts.items() %}
    background-color:{{ v[1] }};
{% endfor %}

然后在你的 html/python 中

<div id="cell" class="flex-container" onclick="remove()">
    {% for k, v in locations_dicts.items() %}
        <div class="{{ v[1] }}">{{ k }}<br>{{ v[0] }}<br>{{ v[1] }}<br>{{ v[2] }}</div>
    {% endfor %}
</div>

【讨论】：

编辑：建议删除样式中的 php（背景色）。
你我的朋友是个天才！这非常有效，非常感谢您的帮助！

【解决方案2】：

请纠正我，如果我已经磨损了，但是您想要做的是根据 ping 为每个弹性框赋予背景颜色，对吗？所以你基本上有 3 种颜色绿色代表好的黄色平均值和红色代表不好，如果这是正确的，我对 python 一无所知，但我知道 HTM5 CSS3 和 Javascript。这可以通过 css 或 javascript 以两种方式轻松完成。

首先看看你的代码：由于我不知道python，所以我不得不猜测一些事情，例如这段代码看起来你正在创建一些css规则。

<style>
    .flex-container > div {   
    ------some style-----   
    {% for k, v in locations_dicts.items() %}
    background-color:{{ v[1] }};
    {% endfor %}
    }
    -----more style-----
</style>

现在那部分是有趣的部分，我不知道你从哪里得到变量“K”和“V”的值，我不知道 python，但对我来说看起来像一个生成的“for循环”父 div 中的一堆 div 类 flex-container 直到它到达 {% endfor %} 并且“v[1]”是颜色，这就是为什么你使用 v[1]

现在，这个逻辑的问题是实际上没有意义，因为如果我是正确的并且它在做一个“for循环”它所做的就是一遍又一遍地覆盖你的CSS规则，直到它到达{% endfor %} 这就是为什么你所有的 div 看起来都一样。

第二次看你的代码：（你的 HTML 太糟糕了）我对 python 一无所知，但看起来你可以传递一些变量和 HTML 标记，就像你可以在使用 Javscript 的字符串模板中一样。

{% for k, v in locations_dicts.items() %}
<div>{{ k }}<br>{{ v[0] }}<br>{{ v[1] }}<br>{{ v[2] }}</div>
{% endfor %}

查看您附加到问题的图片，我可以做出一些假设：“K”是城市的名称，“V”显然是一个数组，它至少有 3 个值 [0] 是 IP [1 ] 是一个字符串，表示绿色或黄色（可能有一个红色），[2] 是 ping，它用另一个字符串（22ms、18ms 等）表示。如果我是正确的，并且您可以将 HTML 标记和 CSS 规则与您的变量一起传递，那么解决方案将如下所示。

CSS 解决方案：你必须重新思考你的逻辑，开箱即用，或者在这种情况下“跳出容器”。基本上将着色排除在等式之外，并且不要动态生成您的 CSS 规则。那么你的代码应该是这样的。

{% for k, v in locations_dicts.items() %}
<div class="box-{{ v[1] }}">{{ k }}<br>{{ v[0] }}<br>{{ v[2] }}</div>
{% endfor %}

意味着每个 div 将获得存储在 v[1] 中的一种可用颜色，并且您将该颜色作为类的一部分传递，因此您最终将获得 3 个类 "box-Green" "box-Yellow" "box-Red"

Javascript 解决方案：您可以使用 Javascript 并根据颜色为 div 分配一个类，但您必须将颜色作为数据属性传递，您的代码应如下所示：

{% for k, v in locations_dicts.items() %}
<div data-color="{{ v[1] }}">{{ k }}<br>{{ v[0] }}<br>{{ v[2] }}</div>
{% endfor %}

Javascript 代码：

function coloringDivs(){
  const selectGreen = document.querySelectorAll('[data-color="Green"]');
  for (let i = 0; i < selectGreen.length; i++) {
    selectGreen[i].setAttribute("class", "box-Green");
  };
  const selectYellow = document.querySelectorAll('[data-color="Yellow"]');
  for (let i = 0; i < selectYellow.length; i++) {
    selectYellow[i].setAttribute("class", "box-Yellow");
  };
  const selectRed = document.querySelectorAll('[data-color="Red"]');
  for (let i = 0; i < selectRed.length; i++) {
    selectRed[i].setAttribute("class", "box-Red");
  };
};
coloringDivs();

CSS 规则：

.box-Green{background-color: green;}
.box-Red{background-color: red;}
.box-Yellow{background-color: orange;}
/*orange because yellow is actually a horrible color for a background*/

现在你的 HTML 我的朋友，对不起，我不想变得刻薄，但它太可怕了，就像 1990 年的噩梦网页，它让我畏缩，我会建议一些改变：

不鼓励使用 flexbox，因为它太旧了，而网格更好。
利用 HTML5 语义元素
除非绝对必要，否则不要使用内联样式（不认真，不要使用它们）

我认为这对您的 html 标记有用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="refresh" content="60">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <meta http-equiv="refresh" content="60">
  <title>Document</title>
</head>
<body>
<nav>
    <h2 class="dashboard-title">Mikrotik Dashboard</h2>
    <ul>
        <li><a class="active"href="/">Dashboard</a></li>
        <li><a href="/add">Add Location</a></li>
        <li><a href="/remove">Remove Location</a></li>
    </ul>
</nav>
<main>
<section>
    {% for k, v in locations_dicts.items() %}
      <article>{{ k }}<br>{{ v[0] }}<br>{{ v[1] }}<br>{{ v[2] }}</article>
    {% endfor %}
</section>
</main>
<script src="main.js" ></script>
</body>
</html>

在这支笔中你可以看到代码的样子 GO TO CODE PEN

奖励我为您的关闭按钮添加了一些 Javascript

【讨论】：

这是一个了不起的答案，你说得对，我的 HTML 和 CSS 很糟糕。我对两者都很陌生，慢慢地通过它们学习我的方式。 Python 是我最舒服的，但非常感谢您的所有输入，我肯定会考虑清理 HTML 并删除内联样式。这个项目非常处于起步阶段，我想在担心修饰代码之前获得一个可行的概念。现在我有了一个可行的概念，很多重构将会发生，你的建议将指导很多。所以再次感谢您的回答:)