Question

我正在尝试以特定颜色显示动态值（来自Flask）。如果该值是“正在运行”，则按钮颜色应变为绿色，而其他任何值都应为红色。如果我在值字段中手动写入值，则着色效果很好，但是一旦我输入了动态值{{status}}，JavaScript就无法正确读取它。我究竟做错了什么？页面检查器会向我显示正确的值。

我已经尝试使用“ | safe”作为值了。

<html>
<head>
<style>
.status {
  border-radius: 4px;
  border: none;
  margin: 2px 2px;
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
$(document).ready(function(){
    $('button.status').each(function(){
        if ($(this).val() == 'running') {
            $(this).css('background-color','#4CAF50');
        } else {
    $(this).css('background-color','#e60c30');
    }
    });
});
</script>

</head>
<body>
<button class="status" value='{{status|safe}}'>Status</button>
</body>
</html>

Answer 1

问题实际上不是直接在这段代码中，它与我从flask中获得的值有关。我的值末尾带有“换行符” / n。因此，当我摆脱它时，JavaScript可以读取它。

JavaScript无法读取动态值{{*}}

1 个答案: