如何将动态值与 HTML 元素相关联？

Posted 2023-03-23

【中文标题】如何将动态值与 HTML 元素相关联？

【英文标题】：How to associate dynamic value with HTML elements?

【发布时间】：2020-05-30 06:06:24

【问题描述】：

我想创建一个可点击的列表，当我点击它时可以进行调查。

% extends "layout.html" %

% block title %
    Take Survey
% endblock %

% block main %
    <div class="list-group">
       for search in searches 
      <a href="\take" class="list-group-item">search.topic</a>
       endfor 
    </div>
% endblock %

当我单击它时，我希望它转到一个页面，该页面显示正在显示其主题的调查的问题。 我为用户、调查、问题和选​​项创建了 SQL 表。调查与用户相关联，问题与调查相关联，选项与问题相关联。

我只需要一种方法来访问我的路线中的调查 id(search.id)，我可以使用调查 id 运行 SQL 查询来链接所有内容。

免责声明，我是HTML初学者，所以请尝试详细解释。

【参考方案1】：

您可以通过多种方式使用 html 来执行此操作，以下是其中的一些

使用您需要的值创建一个隐藏输入，稍后当您需要时从该输入中检索它

 <input type="hidden" id="searchId" name="searchId" value="3487">

为元素添加自定义属性，然后在需要时从该元素中检索它

<div class="list-group">
       for search in searches 
      <a href="\take" class="list-group-item">search.topic data-search-id="search.id"</a>
       endfor 
    </div>

也有多种方法可以在不使用 html 的情况下做到这一点

插入具有搜索 ID 的脚本，然后从 javascript 中检索该 ID

% block main %
    <div class="list-group">
       for search in searches 
      <a href="\take" class="list-group-item">search.topic</a>
       endfor 
       <script>
       // just make sure that this variable is unique, so u dont cause errors or overwrite another variable by mistake
       const MY_APP_SEARCH_ID =search.id
       </script>
    </div>
% endblock %

您还可以为每个调查生成一个唯一的网址

 <a href="\take?searchId=search.id" class="list-group-item">search.topic </a>

然后从 \take 端点处理该搜索 id

【讨论】：

@APE 如果这回答了您的问题，然后将其标记为答案并喜欢它，将使其他人更容易找到它

我将其标记为答案，但我的声望低于 15，因此我的赞成票未显示。

你能告诉我如何在烧瓶路线中访问它。你似乎知道你的东西。

@APE 坦率地说我不知道​​烧瓶，但你可以搜索如何从烧瓶中获取 url 参数

非常感谢。我想出了如何传递数据。