python - 将值传递到进度条(twitter bootstrap，Flask)

Question

我正在使用 twitter bootstrap 绘制进度条，但我想指定进度量。为此，我使用了一个 Python 字符串 thePercent，它被传递给 html(通过 Flask)。

百分比:

"width: 35%"

目前，我的 predictions.html 文件如下所示:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
    <span class="sr-only">{{thePercent}}% Complete</span>
  </div>
</div>

我的 view.py 文件如下所示:

@app.route("/result")
def resultpage():

    IDnumber = int(request.args.get('ID'))

    with db:
        cur = db.cursor()
        cur.execute("SELECT AnimalID, AdoptionProbability FROM Demo_Data WHERE AnimalID = '" + str(IDnumber) + "' LIMIT 1")
        query_results = cur.fetchall()

    thePercent= str(int(query_results[0][1])) 
    theDog = "static/PetPics/" + str(int(query_results[0][0]))
    print thePercent

    return render_template("predictions.html", thePercent=thePercent, theDog = theDog)

编辑:感谢到目前为止的回复。我应该提到 thePercent 已成功传递到 predictions.html 文件。例如，

        <div class = "caption-full">

                <a>I have a {{thePercent}} % chance of success</a>
        </div>

返回正确的输出

编辑:我应该提到以下代码有效:

<div class="progress">
  <div id = 'progressBar' class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script> $("#progressBar").css("width",'90%'); </script>

    <span class="sr-only">{{thePercent}} Complete</span>
  </div>
</div>

但是如果我尝试用 {{thePercent}} 替换 '90%'，我会得到一个错误。

我认为问题在于我有效地将 JQuery 与 Jinja 混合在一起。但是如何仅使用 Jinja 来改变进度条呢？

Answer 1

您没有打印出 thePercent 的值，您正在将 style 属性设置为等于值 'thePercent'。您需要使用 Jinja 的 {{}} 来输出它的值，就像您在编辑中所做的那样。

    <div class="progress-bar progress-bar-success" style="width:{{ thePercent }}%">

编辑:

我更新了 style 属性。因为 thePercent 只包含百分比而不是属性的完整值，所以值的其余部分(例如，width 和 %)需要在模板中处理。