Question

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

{% 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的初学者，因此请尝试详细说明。

Answer 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

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

1 个答案: