Question

因此，在某种程度上，我正在从事的项目正在创建一个仪表板，该仪表板将显示一个位置，该位置又是一个IP地址。因此，我将在仪表板上的每个位置动态创建一个FlexBox，该颜色将根据与该位置相关联的IP地址的ping的ms（毫秒）响应时间而改变颜色。所以我遇到的问题是每个FlexBox的背景颜色都没有像应该的那样变化。它使用位置列表中的最后一个位置，并使每个位置都变色。我提供的照片带有我所谈论的例子。颜色代码为黄色，因此FlexBox背景应该为黄色，但实际上是绿色。现在，如果仪表板上的最后一个FlexBox为黄色，则所有方框均为黄色而不是绿色。

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

下面是我用来实现此目的的代码。这是一个Flask应用程序，因此是HTML，CSS和Python的组合。

/usr/lib/jvm/java-1.8.0-openjdk-amd64

Answer 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>

Answer 2

如果我不愿意纠正我，但是您想要做的是根据ping命令为每个flexbox提供背景颜色？所以您基本上有3种颜色，绿色代表良好，黄色代表平均，红色代表不良，如果正确的话，我对python一无所知，但我知道HTM5 CSS3和Javascript。通过CSS或javascript，可以通过2种方式轻松完成此操作。

首先查看您的代码：由于我不了解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内具有flex-container类的一堆div，直到达到{％endfor％}并且“ v [1]”是颜色，这就是为什么您使用v [1]散布背景颜色的原因/ p>

现在，该逻辑的问题实际上是没有任何意义的，因为如果我是对的，并且在其中进行了“ for循环”，它的作用就是一遍又一遍地覆盖CSS规则，直到达到为止 {％endfor％} ，这就是为什么所有div看起来都一样的原因。

再看看您的代码：（我的HTML太糟糕了）我对python一无所知，但是看起来您可以像使用Javscript在字符串模板中一样将一些变量与HTML标签一起传递。

{% 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个类 “盒子-绿色”“盒子-黄色”“盒子-红色”

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

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

2 个答案: