Question

我知道如何根据div ID切换文字，来自此问题Show/Hide text using jquery。我的问题是，如果我事先不知道我想要切换多少项目？因为它取决于用户输入，无论如何都要在每次调用烧瓶时使用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表中的每个单元格添加日期的显示/隐藏选项。但是单独用于每个单元格。

Answer 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以查看其实际效果。

Flask JQuery动态切换文本

1 个答案: