Question

我使用twitter bootstrap绘制进度条，但我想指定进度。要做到这一点，我使用的是Python字符串thePercent，它被传递给html（通过Flask）。

thePercent：

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

但如果我试图取代90％＆＃39;使用{{thePercent}}，我收到了错误消息。

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

Answer 1

我在ror中做过这个，所以我认为它类似。你可以做到的一种方法是使用jQuery。只需将你的百分比传递给类似：

$("#progressBar").css("width",<%=thePercent%>);

我认为它不按照您添加它的方式工作的原因是因为在呈现客户端之前，您没有将其作为后端模板的一部分进行转义（因此它应该是：{{thePercent}}）。 / p>

我会查看来源，看看thePercent是实际被打印为值还是文本。

Answer 2

您没有打印出thePercent的值，而是将style属性设置为值'thePercent'。您需要使用Jinja的{{}}输出其值，就像您在编辑中一样。

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

修改

我更新了style属性。由于thePercent仅包含属性的百分比而非完整值，因此需要在模板中处理值的其余部分（ig，width和%）。 p>

Answer 3

确定，我想我明白了：

<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","{{thePercent}}"); </script>
  </div>
</div>

将价值传递到进度条（twitter bootstrap，Flask）

3 个答案: