Question

我目前拥有HTML页面，可以从Flask脚本中接收有关一组人的数据。

return render_template('test.html', data = response)

我目前可以获取所有数据以在页面上更正打印，但我想要做的是制作一个切换信息的按钮。例如，下面HTML中列出的字段是姓名，年龄，身高和体重;我想做的是将名称设为一个按钮，切换该特定人的年龄，身高和体重。在我目前的实现中，我已经实现了一个按钮，但它切换了页面上显示的所有人的信息，而不是我点击的名字的人。

所以我向你们提出的问题是，有没有办法让一个按钮与一个特定的div相关联来切换？

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>A Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("div").toggle();
                });
            });
        </script>
    </head>

    <body>

        {% for item in data.Items %}
        <button>Person Name:   {{ item.name }}</button><br>
        <div>
            Age:   {{ item.age }}<br>
            Height:   {{ item.height }}<br>
            Weight:   {{ item.weight }}<br>
        </div>
        <br><br>
        {% endfor %}

    </body>

Answer 1

为有问题的div创建一个事件处理程序。你希望它在切换时可视地隐藏自己，对吧？您可以将此visible属性设置为false。我认为你应该为每个人设置一个“隐藏此”按钮或复选框，并让它切换该人信息的可见性。我还建议在javascript中查看“this”关键字以及它是如何工作的，因为我假设你有一个动态的人数，并且你没有为每个人分配一个唯一的id？

Answer 2

有几种方法可以做到这一点，但这可以在不为每一行设置标识符的情况下工作。如果您使用此方法，请务必立即删除标题中的onclick事件操作。

.extrainfo {
  display: none;
}

此外，如果您希望默认隐藏额外信息，请在样式表中添加：

field.label

如何为div添加与动态内容关联的按钮

2 个答案: