Flask JQuery 动态切换文本答案

【问题标题】：Flask JQuery toggle text dynamicallyFlask JQuery 动态切换文本
【发布时间】：2015-05-11 08:36:29
【问题描述】：

我知道如何根据 div id 切换文本，来自这个问题Show/Hide text using jquery。我的问题是，如果我事先不知道我有多少项目要切换？由于它取决于用户输入，是否每次调用flask时都可以使用JQuery动态分配切换功能？

我的模板如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 10000px;
        padding-top: 100px;
      }
    </style>
  </head>
  <body>

    <div class="container">
    <table>
    <tr>
        <td><h2>Header 1</h2></td>
        <td><h2>Header 2</h2></td>
    </tr>
      {% for group in my_list %}
         {% for row in group %}
         <tr>
           <td>{{ row[0] }}</td>
           <td>{{ row[1] }}</td>
        </tr>
        {% endfor %}
      {% endfor %}
    </table>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

我的 python/flask 脚本看起来像：

from flask import Flask, render_template
import pickle

app = Flask(__name__)


@app.route("/")
def template_test():
    data=pickle.load(open('results.p','rb'))
    newdata = zip(
    zip(*(x['titles'] for x in data.values())),
    zip(*(x['dates'] for x in data.values())))

    list_data=list(newdata)
    return render_template('index.html', my_string="Wheeeee!",   my_list=list_data)

if __name__ == '__main__':
    app.run(debug=True)

results.p 文件可以改变，所以list_data 的长度会改变。这个想法是针对 HTML 表中的每个单元格，我想为日期添加一个显示/隐藏选项。但对于每个单元格单独进行。

【问题讨论】：

您能否提供一些示例代码来更好地说明您的用例？
完成@JomelI。希望这有助于澄清事情:)

标签： jquery python flask

【解决方案1】：

所以问题是将切换处理程序分配给元素的动态集合（在本例中为表格单元格）。这是一种方法：

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // Get the table element by ID.
      $('#data-table')
      // Get all <a class="toggle"> elements inside the table.
      .find('a.toggle')
      // Set a click handler for each.
      .click(function(e) {
        // The details of this will depend on 
        // where your toggle trigger element is 
        // relative to the date element that you 
        // want to toggle.
        //
        // In this example, the date is in the <span />
        // immediately preceding the <a /> toggle.
        //
        // So we can get the <a /> itself by $(e.target),
        // then the date element to toggle using $.prev().
        var date = $(e.target).prev();
        date.toggle();
      });
    });
  </script>
  <title>Toggling table cells dynamically</title>
</head>

<body>
  <table id="data-table">
    <tr>
      <td><h2>Header 1</h2></td>
      <td><h2>Header 2</h2></td>
    </tr>
    <tr>
      <td>Title 1</td>
      <td><span>Date 1</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td><span>Date 2</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td><span>Date 3</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    [ ...more rows... ]
  </table>
</body>

</html>

查看here on JSBin 以了解它的实际效果。

【讨论】：