javascript - JavaScript 不读取动态值 {{*}}

问题描述

我正在尝试以特定颜色显示动态值（来自 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>

标签： javascriptflask

javascript - JavaScript 不读取动态值 {{*}}

问题描述

解决方案

推荐阅读